Question

所以我正在做的是一个脚本，在您编写时实时显示您在登录按钮中的用户名。我现在的问题是脚本也显示密码，显然是不能容忍的。另外我如何改进我的代码，以便当我在用户名字段中使用退格键时，我可以按住它，它仍然在该按钮中实时显示。目前它只是从按钮中删除了一个字符，因为我正在使用window.onkeyup。

所以现在这是我的代码。

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>

这是脚本文件：

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/

Answer 1

这解决了密码问题：

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

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

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

这个更简单的版本修复了退格重复问题（虽然不是实时的，但我不确定它在这里是否至关重要）：

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;
}

Answer 2

将onkeyup处理程序附加到输入，而不是窗口。

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

每次关注名称字段时，usr_name函数都会附加一个新的事件处理程序。也许你可以将代码移到onload而不是

如何改进我的脚本不显示用户名字段的密码字段

2 个答案: