javascript - replace text on keyup without showing default value

Question

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 that if your computer doesn't have Unicode 6 or more it won't show you the special character which is a skinny X.

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

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

Answer 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);
})

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