Browser Compatibility--- Plain Javascript code

Question

I am struggling to run below code in Chrome Browser Version 43.0.2357.81 m, and OS windows XP.

Below code is work perfectly on Firefox and IE. is chrome browser compatible with windows Xp or not.

In chrome I am getting TrpeError: translate is not function;

Thanks in Advance.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function translate(event){
                if(event.keyCode == 13 || event.which==13){                 
                    alert("You have entered ENTER key");                    
                }
            } 

        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>User Name: </td>
                <td><input type="text" name="username" id="username"></td>

            </tr>           
            <tr>
                <td>Password :</td>
                <td>
                    <input type="password" name="password" id="password" onkeydown="javascript: translate(event)">
                </td>

            </tr>
            <tr>
                <td></td>
                <td><input type="submit" name="Login" value="Login"></td>

            </tr>

        </table>
    </body>
</html>

Change the function name and it works. – Lain May 29 '15 at 13:23 — Lain, May 29 '15 at 13:23

Vaune · Answer 1 · 2015-05-29T14:11:45.290

3

EDIT: As pointed out by Aaron Digulla, this is not related to Chrome's Content Security Policy as I first thought. I'll leave this answer up however, as the code below is still a valid approach to handling the event.

var passfield = document.getElementById('password');
passfield.onkeydown = function(event) {
     if(event.keyCode == 13 || event.which==13){                 
          alert("You have entered ENTER key");                    
     }
}

The following fiddle shows this in action:
https://jsfiddle.net/x0enzmc7/

edited May 29 '15 at 14:11

answered May 29 '15 at 13:22

Vaune

314
3
13

1

The first part of the answer only applies when the server sends a special header to the browser to enable CSP. Specifically, jsfiddle wouldn't work if Chrome would enable CSP by default. – Aaron Digulla May 29 '15 at 14:06
Thanks Aaron, I've updated my answer to reflect that. – Vaune May 29 '15 at 14:12

Aaron Digulla · Answer 2 · 2015-05-29T14:14:19.970

2

Omit the javascript:. This should work:

... onkeydown="translate(event)" ...

But it's probably less brittle to attach a function to the onload event of the page:

function onload() {
    var password = document.getElementById('password');
    password.onkeydown = translate;
}

Note that event might be undefined inside of translate(). Use

event = event || window.event;

to fix that.

Lastly, the function should return true or false, depending on whether it wants to swallow the event.

As you can see, this is pretty hard to get right. Just add jQuery to your page and use it - it fixes all those pesky issues.

edited May 29 '15 at 14:14

answered May 29 '15 at 14:09

Aaron Digulla

321,842
108
597
820

thanx Aaron, i'm new to javascript, here my question is in javascript function when to use true and false return – Manjunath R J Jun 02 '15 at 09:02
Read http://www.quirksmode.org/js/introevents.html and http://stackoverflow.com/questions/4379403/jquery-event-handlers-return-values – Aaron Digulla Jun 02 '15 at 09:51

Browser Compatibility--- Plain Javascript code

2 Answers2