1

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 !

mounaim
  • 1,132
  • 7
  • 29
  • 56
  • http://stackoverflow.com/a/4605347/96100 http://stackoverflow.com/a/3580352/96100 – Tim Down Jan 09 '14 at 14:36
  • @TimDown Thank you man :) But I need this in IE8, I've noticed that their implementation of Javascript is quite different from the other browsers :) – mounaim Jan 09 '14 at 14:42
  • The code in both of those links works in IE 8. Also IE 7 and 6. The only problem you could have in IE <= 8 is with line breaks, which usually only applies to textareas rather than inputs. – Tim Down Jan 09 '14 at 14:57

1 Answers1

2

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;
        }
    }
}
Barney
  • 16,181
  • 5
  • 62
  • 76
  • Thanks @Barney ! But this is not working in Internet Explorer 8, here is the details of the error : Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; InfoPath.3; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) Timestamp: Thu, 9 Jan 2014 14:33:37 UTC Message: 'document.getElementById(...)' is null or not an object Line: 4 Char: 1 Code: 0 URI: file:///C:/Documents%20and%20Settings/k.hinnach/Bureau/nice%20conversion.html – mounaim Jan 09 '14 at 15:13
  • Ah, that's probably because the script is executing before the input is available. The quickest way to solve this is to execute the code after window load… I've edited the code above… – Barney Jan 09 '14 at 15:43
  • OK thank you @Barney, nowit's displaying this error : Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; InfoPath.3; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) Timestamp: Thu, 9 Jan 2014 16:03:59 UTC Message: 'which' is null or not an object Line: 6 Char: 9 Code: 0 URI: file:///C:/Documents%20and%20Settings/home$/Bureau/newest%20conversion.html – mounaim Jan 09 '14 at 16:02
  • OK, made 2 changes to the code: fixed that issue by fixing the `keyCode` check (IE8 and older use `window.event` instead of event arguments); also made the function add to the input value instead of replacing (`+=` instead of `=`) — this way we can input multiple characters. – Barney Jan 09 '14 at 16:47
  • Thanks @Barney for your great help :) :) this is working in IE10 and I will test it in IE8. – mounaim Jan 09 '14 at 19:06