1

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

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

我在这个元素上有一个 Twitter Flight 事件监听器，如下所示：

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 事件上运行的代码
  • 使用Selection尝试使用collapseToEnd禁用对文本的选择。
  • 使用 click,focus,blur 事件尝试从输入的文本中删除选择
  • 触发右箭头键事件以尝试简单地向前移动光标，这样用户就不会删除选定的文本
  • 使用 setInterval 定期删除窗口所做的选择

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

4

1 回答 1

0

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

this.on('keyup', function(e) {
  e.preventDefault()
});
于 2014-04-07T20:53:12.693 回答