javascript - keyup 函数执行异常

Question

所以我得到了一点codepen .到目前为止一切正常，除了一点点。我有一个<h1>和一个 <input> .当我在文本输入中键入内容时，它的值应该传递给 <h1>实时。
我尝试使用 keyup 函数来做到这一点:

$('input[name=titleInput]').keyup(function(){
  $('#title').text(this.value);
});

有些事情发生了，但不是我想要的。
当我在文本输入中输入一些东西，然后删除它(使用退格键)并重新输入一些东西时，只有第一个字符被传递给标题。
/>
在我的 codepen 上试试吧。也许这只是我的一个愚蠢的错误，但对我来说这种行为很奇怪。
提前感谢您的帮助!

编辑:
我正在使用 text-fill-color ，这可能会导致问题。

编辑 2:
我的一个 friend 测试过它。这对她有用。她使用的是 Chrome 和与我相同的版本 (58.0.3029.110 (official build) (64-Bit))。

Answer 1

Chrome 无法正确更新内容。如果您使用带有 vendor 前缀的 css 属性，那么此类错误总是会发生，因此您应该避免这些错误。

您可以在更新前隐藏容器，然后在超时后再次显示它。这将触发更新，但也会导致闪烁。

$('input[name=titleInput]').keyup(function(){
  $('.clipped').hide()
  $('#title').text(this.value);
  setTimeout(function() {
    $('.clipped').show();
  })
});

编辑 另一种方法可能是在文本上使用 background-clip 并自己提供倒置图像，但我现在没有时间对此进行测试。

EDIT2 根据@TobiasGlaus 的测试，下面的代码确实解决了这个问题而没有闪烁:

$('input[name=titleInput]').keyup(function(){
  $('.clipped').hide().show(0)
  $('#title').text(this.value);
});

这似乎与 $('.clipped').hide().show() 不同，它最有可能启动持续时间为 0 的动画并使用 requestAnimationFrame 也会触发重绘。为了不依赖这个 jQuery 行为，代码应该写成:

$('input[name=titleInput]').keyup(function(){

  if( window.requestAnimationFrame ) {
    $('.clipped').hide();
  }

  $('#title').text(this.value);

  if( window.requestAnimationFrame ) {
    window.requestAnimationFrame(function() {
      $('.clipped').show();
    })
  }
});