Replace Text On Keyup Without Showing Default Value

I'm developing a virtual Turkish alphabet keyboard. I'm trying to replace 'ed' with '𐰓', it works well however it shows 'ed' before replacing. How can I get rid off that ? Note

Solution 1:

Use input event instead.

$('#text').on('input', function(e) {
  $('#text').css('direction', 'rtl');
  $('#text').css('unicode-bidi', 'bidi-override');
  text2 = $(this).val();
  text2 = text2.replace(/(ed)/g, "𐰓");
  $("#text").val(text2);
})

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

Solution 2:

Here is something you can build on.

Note I am using keypress and when chars are found in the conversion, I add them

I wonder how you will allow typing of for example eX if you want to allow other chars to be typed than can be converted

var text1 = [],
  text2 = [],
  conversion = {
    "ed": "𐰓"
  }
$(document).keypress(function(e) {
  text1.push(String.fromCharCode(e.which))
  var tr = conversion[text1.join("")];
  if (tr) {
    text2.push(tr);
    console.log(text1.join(""), tr)
    $("#text").val(text2.join(""));
    text1 = [];
  }
});

#text {
  direction: rtl;
  unicode-bidi: bidi-override;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
It is read only. Just start typing<br/><textareaid="text"readonly></textarea>