Prevent keypress default value when user types

Question

I want to replace a with b but i always see a before b. I tried it with other events like keyup, keydown, event.preventDefault but neither of them worked. How can i prevent this "a" view when user types ?

$("#text").keypress(function(event) {
  text2 = $(this).val();
  text2 = text2.replace(/(a)/g, "b");
  $("#text").val(text2);
});

//i tried with keyup, keydown also...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="text"></textarea>

why -1 already ????? sorry but please don't send me a link saying "this question is already answered" because i checked it before posting — pinug, Aug 10 '18 at 11:39

T.J. Crowder · Accepted Answer · 2018-08-10T11:53:59.070

3

Using event.preventDefault:

$("#text").keypress(function(event) {
  if (event.key === "a") {
    event.preventDefault(); // <================
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="text"></textarea>

That just prevents the a from appearing. If you want to insert b instead of a when the user types a, you'll need the techniques in this question's answers. Just calling .val(..) will mess up the user's cursor position (try typing in front of existing text when updating the value with val to see the problem).

Live example using Tim Down's answer to that question:

$("#text").keypress(function(event) {
  if (event.key === "a") {
    event.preventDefault();
    insertTextAtCursor(this, "b");
  }
});
function insertTextAtCursor(el, text) {
    var val = el.value, endIndex, range;
    if (typeof el.selectionStart != "undefined" && typeof el.selectionEnd != "undefined") {
        endIndex = el.selectionEnd;
        el.value = val.slice(0, el.selectionStart) + text + val.slice(endIndex);
        el.selectionStart = el.selectionEnd = endIndex + text.length;
    } else if (typeof document.selection != "undefined" && typeof document.selection.createRange != "undefined") {
        el.focus();
        range = document.selection.createRange();
        range.collapse(false);
        range.text = text;
        range.select();
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="text"></textarea>

edited Aug 10 '18 at 11:53

answered Aug 10 '18 at 11:40

T.J. Crowder

1,031,962
187
1,923
1,875

okay sir this is not exactly what i wanted because i tried it before but thank you – pinug Aug 10 '18 at 11:53
@pinug - How so? – T.J. Crowder Aug 10 '18 at 11:53
oh i didn't see your last post yes that's it sir ! – pinug Aug 10 '18 at 11:53
Well, all I did with the update was show an example of applying the techniques I'd already pointed to. – T.J. Crowder Aug 10 '18 at 11:54
sir how can do this with "abc" -> "b" for instance. because event.key gets only one letter am i wrong ? :/ @T.J. Crowder – pinug Aug 13 '18 at 10:57
@pinug - You'd have to respond to the keyup on `c` by doing the replace. Maintaining the correct cursor position will be tricky, but possible. Give it a go. If you run into a **specific** problem, post a question with what you're trying to do and a [mcve] of your attempt. – T.J. Crowder Aug 13 '18 at 11:04

Prevent keypress default value when user types

1 Answers1