keyup 函数执行怪异答案

【问题标题】：keyup function performing weirdkeyup 函数执行怪异
【发布时间】：2017-06-15 13:26:35
【问题描述】：

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

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

发生了一些事情，但不是我想要的。
当我在文本输入中输入内容，然后删除它（使用退格键）并重新输入内容时，只有第一个字符会传递给标题。

在我的 codepen 上试用一下。也许这只是我的一个愚蠢的错误，但对我来说，这种行为很奇怪。
提前感谢您的帮助！

编辑：
我正在使用@ 987654326@，这可能会导致问题。

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

【问题讨论】：

它似乎在 Firefox 上完美运行，并且在 Chrome 上确实有一个非常奇怪的行为。您是否看到两个浏览器之间的行为相同？
你可以试试 .val();而不是价值
有趣的是，如果我将 title id 移动到另一个 dom 元素，一切正常。所以我猜这是 Chrome 的一个错误，你正在使用特定的文本填充？
如果我删除-webkit-text-fill-color: transparent;，那么一切都会按预期进行。你能确认一下吗？
@R.McManaman 没问题！如果我没有找到解决方案，我会使用类似于您的建议的方法。但我对 t.niese 下面的回答很满意。

标签： javascript jquery html css events

【解决方案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();
    })
  }
});

【讨论】：

不错的解决方案！效果很好，但正如你所说，它会导致闪烁。但我想我可以忍受。
@TobiasGlaus 您可以尝试使用其他一些 css 属性，例如使用转换稍微切换缩放因子或位置，在不同元素上使用像 0.1 这样的小因子，可能其中之一会也会导致重绘
我现在尝试了其他方法。我没有使用超时，而是将这个$('.clipped').hide().show(0); 添加到我的初始代码中。不再闪烁。你能证实吗？（编辑了我的代码笔）
@TobiasGlaus 是的，没有闪烁。我没想到会这样。但也许那是因为 jQuery 启动了一个持续时间为 0 的动画，内部仍然使用 requestAnimationFrame。
是的。（我必须赞扬 Juank this solution tho。）感谢您的帮助！

【解决方案2】：

我会使用以下几行：

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

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

【讨论】：

感谢您的回答！这对我不起作用：/
@TobiasGlaus 是的，它不会触发 chrome 上的更改，您必须使用 t.niese 解决方案来强制重绘。