CODEWITHSUNDEEP
javascripthtml
Kenssi
Kenssi

Reputation: 13

How to improve my script not to show password-field with username-field

So what I am doing is a script that shows your username in Login button in real-time as you write it. My problem is now that the script is showing password as well and obviously that can't be tolerated. Also how do I improve my code so that when I use backspace in username-field, I can hold it down and it is still showing in real-time in that button. At the moment it is just erasing one character from the button since I am using window.onkeyup.

So here's my code at this moment.

HTML:

<html>  
    <head>
        <title>Assignment7</title>
        <script src="usr_script.js"></script>
    </head>

    <body onload="onload()">
        <form method="post" action="login.php">
            <table border="0" style="width: 10%; height: 10%" align="center">
                <tr>
                    <td colspan="2" style="text-align: center;">
                         <h1><b>Murphy's Blog<br></b></h1>
                </tr>
                <tr>
                    <td style="text-align: center;">Username:</td>
                    <td style="text-align: center;">
                        <input type="text" name="usrname" onfocus="usr_name();" />
                    </td>
                    <br>
                </tr>
                <tr>
                    <td style="text-align: center;">Password:</td>
                    <td style="text-align: center;">
                        <input type="password" name="pwd" id="pwd" />
                    </td>
                    <br>
                </tr>
                <tr>
                    <td colspan="2" style="text-align: center;">
                        <input type="submit" name="login" id="button" />
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

And here's the script file:

function usr_name() {
    var key = "";
    window.onkeyup = function (e) {
        if (e.keyCode == 8) {
            var lenght = key.lenght;
            key = key.slice(0, -1);
        } else {
            key = key + String.fromCharCode(e.keyCode);
        }
        write(key);
    }
}

function write(key) {
    key = key.toLowerCase();
    key = key.charAt(0).toUpperCase() + key.slice(1);
    var text = "Login with name: " + key;

    document.getElementById("button").value = text;
}

function onload() {
    document.getElementById("button").value = "Login with name: ";
}

http://jsfiddle.net/isherwood/5CuLy/

Upvotes: 1

Views: 119

Answers (2)

lordvlad
lordvlad

Reputation: 5347

attach your onkeyup handler to the input, not to the window.

document.getElementById('nameinput').onkeyup = function ...

your usr_name function attaches a new event handler each time you focus the name field. maybe you could move that code to onload instead

Upvotes: 1

isherwood
isherwood

Reputation: 61083

This fixes the password issue:

http://jsfiddle.net/isherwood/5CuLy/1/

<input type="text" name="usrname" id="usrname" ...

document.getElementById('usrname').onkeyup = function (e) {

And this simpler version fixes the backspace repeat issue (although not real-time, but I'm not sure it's critical here):

http://jsfiddle.net/isherwood/5CuLy/2/

function usr_name() {
    var key;

    document.getElementById('usrname').onkeyup = function (e) {
        key = this.value;
        write(key);
    }
}

function write(key) {
    key = key.toLowerCase();
    key = key.charAt(0).toUpperCase() + key.slice(1);
    var text = "Login with name: " + key;

    document.getElementById("button").value = text;
}

Upvotes: 2

Related Questions