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
– pinug, Commented Aug 10, 2018 at 11:39

T.J. Crowder · Accepted Answer · 2018-08-10 11:53:59Z

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, 2018 at 11:53

answered Aug 10, 2018 at 11:40

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

pinug Over a year ago

okay sir this is not exactly what i wanted because i tried it before but thank you

T.J. Crowder Over a year ago

@pinug - How so?

pinug Over a year ago

oh i didn't see your last post yes that's it sir !

T.J. Crowder Over a year ago

Well, all I did with the update was show an example of applying the techniques I'd already pointed to.

pinug Over a year ago

sir how can do this with "abc" -> "b" for instance. because event.key gets only one letter am i wrong ? :/ @T.J. Crowder

|

Collectives™ on Stack Overflow

Prevent keypress default value when user types

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related