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
– Lain

2015-05-29 13:23:42 +00:00
Commented May 29, 2015 at 13:23 — Lain
– Lain, Commented May 29, 2015 at 13:23
What is TrpeError?

Aaron Digulla
– Aaron Digulla

2015-05-29 14:07:55 +00:00
Commented May 29, 2015 at 14:07 — Aaron Digulla
– Aaron Digulla, Commented May 29, 2015 at 14:07

Vaune · Accepted Answer · 2015-05-29 14:11:45Z

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, 2015 at 14:11

answered May 29, 2015 at 13:22

Vaune

3143 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aaron Digulla Over a year ago

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.

Vaune Over a year ago

Thanks Aaron, I've updated my answer to reflect that.

Aaron Digulla · Accepted Answer · 2015-05-29 14:14:19Z

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, 2015 at 14:14

answered May 29, 2015 at 14:09

Aaron Digulla

330k111 gold badges626 silver badges840 bronze badges

2 Comments

Manjunath R J Over a year ago

thanx Aaron, i'm new to javascript, here my question is in javascript function when to use true and false return

Aaron Digulla Over a year ago

Read quirksmode.org/js/introevents.html and stackoverflow.com/questions/4379403/…

Collectives™ on Stack Overflow

Browser Compatibility--- Plain Javascript code

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related