Question

我的目标：当用户点击某个键时，我需要将该键与字符串的第一个字母进行比较。如果它匹配，我需要在文本字段中写入该字符串。

通过使用按键功能，它以这种方式工作：

输入使用按键调用的函数。

2.在它的功能中：
。的document.getElementById（ “名称”）值= “使然”;

然后添加用户按下的字符（将是s）

，结果是“shirans”而不仅仅是字符串（“shiran”）。

我无法使用keyup和keydown函数，因为它们不能与keycode一起使用。

所需结果：文本字段中的字符串。

实际结果：字符串+在文本字段中按下的键。

这是代码：

<!DOCTYPE html>
<html>
<head><title>cookies</title>
</head>

<body>

<form >
user name: <input type = "text" id='name' onkeypress='completeFields(event);'> </br>

</form>

<script>

function completeFields(e){

//get the key
var unicode;
if (e.keyCode)
    unicode = e.keyCode;
else
    unicode = e.charCode;

var username="shiran";
var ch1=username.charAt(0);
var ch2 = String.fromCharCode(unicode);
if(username!=null && username!=""  && ch1==ch2)
{

    document.getElementById("name").value="shiran";
}
}

</script>


</body>
</html>

Answer 1

this你想要做什么？

相关JavaScript：

(function (D, S, undefined) {
    'use strict';
    var base, field;
    field = D.getElementById('name');
    base = 'shiran';
    field.onkeypress = function (e) {
        var char;
        char = S.fromCharCode(e.keyCode);
        if (char !== base[0]) {
            e.preventDefault();
        }
    };
}(document, String));

并且嵌入在OP代码的清理版本中：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8" />
        <title>cookies</title>
    </head>
    <body>
    <form >
        <label>
        <span>user name: </span> 
            <input data-base="shiran"  id="name" onkeypress="autoComplete(event);" type="text">
        </label>
    </form>
    <script>
        (function (S, W, undefined) {
            'use strict';
            function autoComplete (e) {
                var base, char, input, value;
                input = e.currentTarget;
                base = input.dataset.base;
                value = input.value;
                char = S.fromCharCode(e.keyCode);
                // We'll handle the keyup if the char isn't just whitespace
                if (!/\s+/.test(char)) {
                   e.preventDefault();
                }
                if (char === base[value.length]){
                    input.value = base;
                }
            }
            W.autoComplete = autoComplete;
        }(String, window));
    </script>
    </body>
</html>

Answer 2

使用event.preventDefault方法或return false来阻止浏览器事件 - 在输入中添加字符。

keypress事件 - 事件发生后如何删除密钥？

2 个答案: