JSFiddle - React, Tailwind, and code Playground

by hamzeh qanavatian

HTML

<input class="EnglishOnly" id="my-input" type="text" />
<p id="p0">a==a.replace(r, "") is:  </p>
<p id="p1"> this.val()is: </p>
<p id="p1-1"> BEFORE REPLACE a is: </p>
<p id="p1-2"> $(this).val("") is: </p>
<p id="p2"> AFTER REPLACE a is: </p>
<p id="p3"> this.val(a) is:  </p>

JavaScript

//result on firefox-android is...
$(".EnglishOnly").bind("keyup", function() {
var r= /[^a-zA-z\s]/;
		$("#p1").html('this.val()is: '+ $(this).val());
    //result bad (unreplaced before text)
var a=$(this).val();     
    $("#p1-1").html('BEFORE REPLACE a is: '+ a); 
    //result bad (unreplaced before text)
$(this).val("");
    $("#p1-2").html('this.val("") is: '+ $(this).val());
		$("#p0").html('a==a.replace(r, "") is: ' +(a==a.replace(r,"")));
var alength=a.length;
for (var i=0;i<=alength;i++) a=a.replace(r,"");
a=a.toUpperCase();
      $("#p2").html('AFTER REPLACE a is: '+ a);
      //result bad: before+(before+current key)
$(this).val(a);
      $("#p3").html('this.val(a) is: '+ $(this).val());
      //result bad: before+(before+current key)      
});