Chrome extension: How send backspace key event to a text field?

Question

I trying send a command throught my contentScript file to remove last character of a string in a <input> field that was inserted by user.

Already tried several ways found on web but nothing worked.

My last attempt as with TextEvent (like code below), but without success.

contentScript.js - Reference

document.getElementById("inputTextId").value = "Some string inserted by user";                        
var textEvent = document.createEvent('TextEvent');
textEvent.initTextEvent('textInput', true, true, null, String.fromCharCode(13), 9, "en-US");
document.getElementById("inputTextId").dispatchEvent(textEvent);

Is really possible make this?

Text events are part of [*interface CompositionEvent*](https://www.w3.org/TR/uievents/#compositionevent) and must have associated key events also dispatched. But as ibrahim mahrir says, just edit the value, particularly if you don’t know where the insertion point is. Even if you get a backspace, and it deletes a character, there’s a good chance you’ll delete the wrong one. — RobG, Jul 22 '18 at 02:45

score 0 · Accepted Answer · answered Jul 22 '18 at 02:40

You can't automate editing through key events like that: that is simply impossible. If you want to remove the last character of the input value, just do it directly by getting/setting the value property of the input:

input.value = input.value.slice(0, -1);

If you want a more realistic backspace effect, then just use selectionStart and selectionEnd:

var value = input.value;                                                // get the value of the input
var start = input.selectionStart;                                       // get the start index of the selection of the input
var end = input.selectionEnd;                                           // get the end index of the selection of the input

if(start === end) {                                                     // if nothing is selected, i.e. start is the same as end which is the position of the carret
    if(start > 0) {                                                     // if the carret is not at position 0 (nothing to remove in this case)
        input.value = value.slice(0, start - 1) + value.slice(start);   // remove one character before the carret
        input.selectionStart = input.selectionEnd = start - 1;          // set the new carret position
    }
} else {                                                                // otherwise, if there is a selection
    input.value = value.slice(0, start) + value.slice(end);             // just remove the selection from the input. Don't remove any other characters
    input.selectionStart = input.selectionEnd = start;                  // set the new carret position
}

then not is possible simulate a key press of keyboard to make this same task (remove last character of a string on input field)? — , Jul 22 '18 at 03:04
For example, on Windows exists the [`keybd_event()`](https://msdn.microsoft.com/pt-br/library/windows/desktop/ms646304%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396) api to this. Exists something similar in Javascript (chrome extension) ? — , Jul 22 '18 at 03:15
No, not to my knowledge. The only way you can acheive what you want is to directly alter the value of the input. — ibrahim mahrir, Jul 22 '18 at 03:35
@user9672569 If you're really looking for true automation, you'll have to use external tools such as [selenium](https://www.seleniumhq.org/) — ibrahim mahrir, Jul 22 '18 at 03:39

Chrome extension: How send backspace key event to a text field?

1 Answers1