Javascript input change

Question

Is it possible to change the input value of the keyboard?

For example:

You press the a key on your keyboard but b will be typed into the input element, instead of a.

You type abc but in the input element will be def.

I tried to capture the keydown event and then fire a keydown event with CustomEvent / Event, but It doesn't work for me. The event capturing is fine but when I create an other keydown event with the new charCode or keyCode the 'new' character won't be typed into the input.

So, is it possible to write something into an input element to the position of the caret, without using value property or any other methods which handle or modify the whole content of the input. So just insert or paste a letter.

JS

function keydown(e) {
    e.preventDefault();

    var event = new Event('keydown');
    event.charCode = 65;
    element.dispatchEvent(event);
}

HTML

<input type="text" onkeydown="keydown(event)">

Probably, this is not possible in this way but I haven't any other idea so far...

@Gothdo ok, but are there any other possibilities for do this eg: paste text to the caret or to the selected area? — gkrupp, Mar 04 '16 at 18:30
Possible duplicate of [Firing a Keyboard Event in JavaScript](http://stackoverflow.com/questions/961532/firing-a-keyboard-event-in-javascript) — Michał Perłakowski, Mar 04 '16 at 18:31
@Gothdo: do any of the answers on that page work in chrome? i tried several just now with no luck... i used to have code that worked, and it stopped too.... — dandavis, Mar 04 '16 at 18:38
@dandavis The top answer doesn't work for me in Chrome and Firefox too. The answer is five years old, so maybe it's obsolete now. — Michał Perłakowski, Mar 04 '16 at 18:59
@dandavis [This](http://stackoverflow.com/a/19883789/3853934) is probably the most up-to-date answer. It turns out I was right that keyboard events can't be triggered with JavaScript. — Michał Perłakowski, Mar 04 '16 at 19:04
i'm not ready to throw in the towel just yet. i had a `simKey(targ,kc)` util that worked well and don't see the harm it posed. maybe you're right about newer browsers, or maybe there's just a lot of stale docs out there. ok, i know there's a lot of stale docs, i was hoping you would find something that works in chrome... — dandavis, Mar 04 '16 at 20:07
@dandavis That kind of event simulation works well with `addEventListener` but doesn't result any insertion to the input. Just create an event which you ar able to listen to. The best solution, what I've found, was the `execCommand` below. — gkrupp, Mar 04 '16 at 22:02

score 1 · Accepted Answer · edited Mar 04 '16 at 20:07

1

I found another way to do this with document.execCommand():

document.querySelector("input")
.addEventListener("keypress", function (event) {
  event.preventDefault();
  document.execCommand('insertText', false, 'b');
})

<input>

edited Mar 04 '16 at 20:07

Michał Perłakowski

88,409
26
156
177

answered Mar 04 '16 at 19:11

gkrupp

408
3
12

score 0 · Answer 2 · answered Mar 04 '16 at 18:46

use the following code to get the cursor position when you type something. once you get the cursor position you can replace the character and set the text back to the text box. let me know you want code to put the cursor back to the location where it replaced the character.

<script type="text/javascript">
function getLocation(ctrl)
{
    var position = 0;

    if (document.selection) {

        ctrl.focus ();
        var sel = document.selection.createRange ();

        sel.moveStart ('character', -ctrl.value.length);

        position = Sel.text.length;
    }
    else if (ctrl.selectionStart || ctrl.selectionStart == '0')
        position = ctrl.selectionStart;

    alert (position);
}

</script>
<input type="text" onkeyup="getLocation(this);"></input>

Thanks, I know this solution, but if I replace the character I must change the whole value — gkrupp, Mar 04 '16 at 18:54

Javascript input change

2 Answers2