Automated convertion of user input from azerty keyboard keys to arabic characters in javascript

StackOverflow https://stackoverflow.com//questions/21022342

Question

I'm trying to implement a JavaScript code that :
1- takes a character entered by a user in an HTML form input text
2- get the character keyCode
3- Display a different character in Arabic corresponding to the previous KeyCode
For example, if the user press "A" button, I will display "ض" in the input text field. I've tried this code but it's not working :

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(e)
{
   var keyCode = (window.event) ? e.which : e.keyCode;
   if (keyCode == 65)
      document.getElementById("firstname").innerHTML="ض";  
}
</script>
</head>


<body>
<FORM action="http://somesite.com/prog/adduser" method="post">
    <P>
    <LABEL for="firstname">First name: </LABEL>
              <INPUT type="text" id="firstname" onkeydown="myFunction()"><BR>

    </P>
 </FORM>

</body>
</html>

The block of code is tried for just one character, if this is working I will be able to implement the algorithm for the rest of characters.

any help on this topic would be greatly appreciated !

Was it helpful?

Solution

You've got a few issues:

  • By setting the onkeydown attribute to myFunction(), the function is being called without any arguments. It's more convenient to do the event binding in the script anyway (that way you don't have to do script debugging in your HTML), but this also allows you to specify the e parameter for the event argument.
  • You're attempting to set the innerHTML, but it should be value — <input>s don't have innerHTML, as they're self-closing.
  • You may also want to return false top stop the a being added to the value after ض

Demo here

window.onload = function(){
    document.getElementById("firstname").onkeydown = function myFunction(e){
        var keyCode = window.event ? window.event.keyCode : e.which; 
        if (keyCode == 65){
            this.value += "ض";
            return false;
        }
    }
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top