如何在文本字段中模拟退格操作？答案

【问题标题】：How might I simulate a backspace action in a text field?如何在文本字段中模拟退格操作？
【发布时间】：2020-05-28 20:32:17
【问题描述】：

按下按钮时，我只想在常规文本框中模拟“退格”，删除光标左侧的字符。

Google 和各种论坛对此产生了非常随机的结果。这样做的正确方法是什么？

【问题讨论】：

我不确定是否可以这样做，因为按下按钮时文本字段会失去焦点，所以你怎么知道光标在哪里。除非您在键入时跟踪它

标签： javascript jquery html dom

【解决方案1】：

这似乎适用于 Safari（也可能是 Firefox），但我还没有在 IE 中测试过：

  function backspaceAtCursor(id)
  {
    var field = document.getElementById(id);

    if(field.selectionStart)
    {
      var startPos = field.selectionStart;
      var endPos = field.selectionEnd;

      if(field.selectionStart == field.selectionEnd)
      {
        field.value = field.value.substring(0, startPos - 1) + field.value.substring(endPos, field.value.length);

        field.focus(); 
        field.setSelectionRange(startPos - 1, startPos - 1); 
      }
      else
      {
        field.value = field.value.substring(0, startPos) + field.value.substring(endPos, field.value.length);

        field.focus(); 
        field.setSelectionRange(startPos, startPos); 
      }
    }
  }

使用：backspaceAtCursor('elementid')

【讨论】：

当selectionStart 属性未实现或selectionStart 为零时，检查if(field.selectionStart) 将失败。 selectionStart will be zero whenever the first character is included in the selection, meaning that such selections can't be deleted.这可以通过将检查替换为if(field.hasOwnProperty('selectionStart')) 来解决。

【解决方案2】：

所以我猜你并不是要把焦点放在文本输入上来删除它。

您可以尝试几种方法。首先，获取输入的当前内容并删除最后一个字符，然后将修改后的字符串放回去。例如（这段代码应该可以工作）：

var txt = $('#myinputtextbox');
txt.val(txt.val().slice(0, -1));

另一种是使用js模拟退格键被击中。您需要专注于输入，将光标移动到行尾，然后触发字符。

【讨论】：

这对于大多数情况来说已经足够简单了，但不能处理光标位于文本范围中间某处或选择文本时的情况。
这不是一个好的答案，它会删除输入字段中的最后一个字符，但不会模拟退格。

【解决方案3】：

纯 Javascript 实现，onClick

var text = document.getElementById(myTxtBox).value;  
text = text.substr(0,text.length-1);
document.getElementById(myTxtBox).value = text;

【讨论】：

这只是删除文本框中的最后一个字符，它不会删除光标左侧的字符。
哎呀，我以为他想模拟退格。
这正是他想要做的 ;-) 但是 Backspace 不会删除文本框中的最后一个字符，而是光标留下的字符 ;-)

【解决方案4】：

用于在文本字段中模拟退格的 jQuery 插件，适用于 IE、FF、Chrome（基于来自 here 的代码）。

jQuery.fn.extend({
backspaceAtCaret: function(){
  return this.each(function(i) {    

    if (document.selection) 
    {
        this.focus();
        sel = document.selection.createRange();
        if(sel.text.length > 0)
        {
            sel.text="";
        }
        else
        {
            sel.moveStart("character",-1);
            sel.text="";
        }
        sel.select();
    }
    else if (this.selectionStart || this.selectionStart == "0")
    { 
        var startPos = this.selectionStart;
        var endPos = this.selectionEnd;

        this.value = this.value.substring(0, startPos-1) + this.value.substring(endPos, this.value.length);
        this.selectionStart = startPos-1;
        this.selectionEnd = startPos-1;
        this.focus();
    } 
    else 
    {
        this.value=this.value.substr(0,(this.value.length-1));
        this.focus();
    }
  })
}
});

【讨论】：