javascript - simulate backspace key on text input field - Stack Overflow

admin管理员组

文章数量:1293159

Can someone provide a good example to simulate the backspace key on a <INPUT> text field?

I need this for a virtual keyboard done in HTML5 and it only needs to work in Webkit browsers.

Notes:

• createEvent/initTextEvent/dispatchEvent with charcode 8 (backspace) is being ignored (that seems to work only for printable characters)
• changing manually the value using substr() sort of works, but this way the caret moves to the end of the input field (and I want to be able to delete characters in the middle of the input field, just like when using a normal keyboard).

Can someone provide a good example to simulate the backspace key on a <INPUT> text field?

I need this for a virtual keyboard done in HTML5 and it only needs to work in Webkit browsers.

Notes:

• createEvent/initTextEvent/dispatchEvent with charcode 8 (backspace) is being ignored (that seems to work only for printable characters)
• changing manually the value using substr() sort of works, but this way the caret moves to the end of the input field (and I want to be able to delete characters in the middle of the input field, just like when using a normal keyboard).

• javascript
• html

Share Follow asked Aug 20, 2012 at 14:01 Udo GUdo G 13.1k1515 gold badges6262 silver badges9292 bronze badges 1

• Have a look at this related SO question. – jeffjenx Commented Aug 20, 2012 at 14:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Alright here you go: http://jsfiddle/dan_barzilay/WWAh7/2/

The get caret function is used to know where to delete the character, if you need more explaining ment. The reset cursor function is used to restore the caret position after the backspacing.

**it's using jquery but you can change it to normal js in secounds

Edit: the below is too plicated to use. According to https://developer.mozilla/en-US/docs/Web/API/Document/execCommand, it's just enough to call document.execCommand("delete");.

Here's my solution using setSelectionRange, which works well on Chrome: https://github./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);
}

Well, the only shortage is that we can not undo the changes it makes.

Add: I find a method to enable undo & redo: in Javascript textarea undo redo , the both anwsers work well on Chrome

本文标签： javascriptsimulate backspace key on text input fieldStack Overflow