输入框占位符打字机悬停效果在Firefox中失效问题咨询

这个问题我之前也碰到过，Firefox对动态修改placeholder属性的处理确实和其他浏览器不一样，咱们一步步来看：

为什么Firefox里无效？ #

Firefox有个特殊的行为：当你通过jQuery的attr()方法去修改输入框的placeholder属性时，它不会立即触发占位符文本的重新渲染——哪怕属性值已经变了，页面上显示的还是旧的占位符。而Chrome、IE这些浏览器会即时响应属性变化，更新显示内容。

这是因为Firefox内部对placeholder的渲染逻辑和其他浏览器不同，jQuery的attr()方法在Firefox里没有触发它的重绘机制。

修复方案 #

最可靠的解决办法是改用原生JavaScript的setAttribute()方法来更新placeholder，原生方法能直接让Firefox识别到属性变化并重新渲染。

修改你的代码如下：

$(function() { 
  var sppInput, 
      sppInputName = $('#spp-input-name'), 
      sppInputNamePlace = sppInputName.attr('placeholder'); 

  // Typewriter Effect 
  function sppInputStart(elm, n, text) { 
    if (n < (text.length)) { 
      // 改用原生setAttribute触发Firefox重绘
      elm.setAttribute('placeholder', text.substring(0, n + 1)); 
      n++; 
      sppInput = setTimeout(function () { 
        sppInputStart(elm, n, text); 
      }, 80); 
    } 
  } 

  function sppInputStop(elm, place) { 
    clearTimeout(sppInput); 
    // 同样改用原生setAttribute恢复初始状态
    elm.setAttribute('placeholder', place); 
  } 

  // Typewriter Effect for Name 
  sppInputName.mouseover(function () { 
    sppInputStart(this, 0, sppInputName.data('typewriter')); 
  }); 

  sppInputName.mouseout(function () { 
    sppInputStop(this, sppInputNamePlace); 
  }); 
}); 

对应的HTML部分保持不变：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input placeholder="Name" data-typewriter="Insert the Name" type="text" id="spp-input-name" name="name" required>

额外说明 #

如果你还是想用jQuery的方法，也可以尝试用prop()代替attr()，不过实测下来原生setAttribute()的兼容性和稳定性在Firefox里更好。另外，你的代码在清理定时器、恢复初始状态的逻辑已经很完善了，这部分不需要调整。

内容的提问来源于stack exchange，提问作者Mer