Safari存在文本输入问题，用户输入时会选择文本，导致文本丢失

Safari issue with text inputs, text is selected as user enters it causing text to be lost

本文关键字：文本 输入 选择 用户 存在 问题 Safari      更新时间：2024-05-28

我的页面上有以下输入元素：

<input class="input" name="custom_fields[new]" placeholder="Enter placeholder" type="text">

我有一个关于这个元素的Twitter飞行事件监听器，看起来像这样：

this.on('keyup', {
  inputsSelector: this.updateViewInputs
});

是什么触发了这种方法：

this.updateViewInputs = function(ev) {
  var isDeletionKeycode = (ev.keyCode == 8 || ev.keyCode == 46);
  // Remove field is user is trying to delete it
  if (isDeletionKeycode && this.shouldDeleteInput(ev.target.value, this.select('inputsSelector').length)) {
    $(ev.target.parentNode).remove();
  }
  // Add another field dynamically
  if (this.select('lastInputsSelector')[0] && (ev.target == this.select('lastInputSelector')[0]) && !isDeletionKeycode) {
    this.select('inputsContainer').append(InputTemplate());
  }
  // Render fields
  that.trigger('uiUpdateInputs', {
    inputs: that.collectInputs()
  });
}

最后触发uiUpdateInputs:

this.after('initialize', function() {
  this.on(document, 'uiUpdateInputs', this.updateInputs)
});
this.updateInputs = function(ev, data) {
  // Render all inputs provided by user
  this.select('inputListSelector').html(InputsTemplate({ inputs: data.inputs }));
}

所有这些功能在Chrome和Firefox上都能正常工作。用户可以在输入中键入内容，并"实时"查看页面更改。用户还可以获得额外的字段，可以在其中输入文本并查看页面更改。

使用Safari时会出现问题，当用户在所描述的输入字段中输入文本时，输入字段中的文本会高亮显示（选中），当用户输入下一个字符时，所有内容都会被该单个字符替换。这导致用户在将其全部替换为下一个输入的字符之前，不能输入超过1或2个字符。

我尝试了几种方法来解决这个问题，但都没有奏效，它们包括：

  • 使用setTimeout延迟keyup事件上的代码运行
  • 使用"选择"尝试使用collapseToEnd禁用对文本的选择
  • 使用单击、聚焦、模糊事件尝试从输入的文本中删除所选内容
  • 触发向右箭头键事件，尝试简单地向前移动光标，这样用户就不会删除所选文本
  • 使用setInterval常规删除窗口所做的选择

我很困惑为什么会发生这种情况，我想知道这是否是Flight的webkit中的错误。我认为这个页面的Firefox或Chrome版本没有问题。谢谢你的帮助！

这似乎是Safari某些版本的问题。在javascript中监听keyup函数时，它会自动选择框中的所有文本，然后在键入下一个键时将其全部删除。要防止这种情况发生，请对传递给keyup函数的事件对象调用preventDefault。

this.on('keyup', function(e) {
  e.preventDefault()
});
相关文章：