Question

所以我得到了一点codepen。到目前为止，一切都有效，除了一件小事。我得到了<h1>和<input>。当我在文本输入中键入内容时，其值应实时传递给<h1>。
我尝试使用 keyup 功能执行此操作：

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

有些事情发生了，但不是我想要的。
当我在文本输入中输入内容时，然后将其删除（使用退格键）并重新输入内容，只有第一个字符被传递给标题。 />在我的codepen上尝试一下。也许这只是我的一个愚蠢的错误，但对我来说这种行为非常奇怪。
感谢您提前的帮助！

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

编辑2：
我的一位朋友测试了它。它对她有用。她正在使用Chrome和我一样的版本（58.0.3029.110（官方版）（64位））。

Answer 1

Chrome无法正确更新内容。如果你使用供应商前缀的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();
    })
  }
});

Answer 2

我使用以下几行：

$('input[name=titleInput]').bind('keypress paste', function() {
   setTimeout(function() {
     var value = $('input[name=titleInput]').val();
     $('#title').text(value);
   }, 0)
});

这将听取粘贴/按键事件，并将在更改时更新值。

键盘功能表现奇怪

2 个答案: