模拟文本输入字段上的退格键

simulate backspace key on text input field

本文关键字：文本 输入 字段 模拟      更新时间：2023-09-26

有人能提供一个很好的例子来模拟<INPUT>文本字段上的退格键吗？

我需要这个在HTML5中完成的虚拟键盘，它只需要在Webkit浏览器中工作。

注意：

  • 具有charcode 8（退格）的createEvent/initTextEvent/dispatchEvent被忽略（这似乎只适用于可打印字符）
  • 使用substr()类型手动更改value是有效的，但这样插入符号会移动到输入字段的末尾（我希望能够删除输入字段中间的字符，就像使用普通键盘一样）

好了，开始吧：http://jsfiddle.net/dan_barzilay/WWAh7/2/

如果需要更多解释性注释，get插入符号函数用于知道在哪里删除字符。重置光标功能用于在退格后恢复插入符号的位置。

**它使用的是jquery，但您可以在secounds 中将其更改为普通js

Edit：下面的内容太复杂了，无法使用。根据https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand，只要调用CCD_ 7就足够了。

以下是我使用setSelectionRange的解决方案，它在Chrome上运行良好：https://github.com/gdh1995/vimium-plus/blob/master/lib/dom_utils.js#L169

simulateBackspace: function(element) {
    var start = element.selectionStart, end = element.selectionEnd, event;
    if (!element.setRangeText) { return; }
    if (start >= end) {
      if (start <= 0 || !element.setSelectionRange) { return; }
      element.setSelectionRange(start - 1, start);
    }
    element.setRangeText("");
    event = document.createEvent("HTMLEvents");
    event.initEvent("input", true, false);
    element.dispatchEvent(event);
}

好吧，唯一的不足是我们无法撤销它所做的改变。

添加：我找到了一个方法来启用undo&重做：在Javascript文本区域undo-redo中，这两个anwser在Chrome 上运行良好

相关文章：