0

次のように、onkeydown 属性を持つフォーム テキスト入力を含む html ページがあります。

<DOCTYPE !html>
<html>

<head>
<title>Lookup User</title>
</head>
<body>
<form method="POST">
<strong>Last Name: </strong><input type="text" id="lname" onkeydown="lookup_user(this.value)" />

</form>
<span id="test"></span>
<script type="text/javascript" src="lookup_user.js"></script>
</body>
</html>

ページは、キーがダウンしているときにユーザーを検索するためにサーバーに非同期要求を行います。ジャバスクリプトファイルは

function lookup_user (lname) {

var xmlhttp;

if (lname=='') {
    document.getElementById('lname').innerHTML = '';
    return;
}

if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
}
else {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}



// generally preferred to place onreadystatechange before open so that it detects readyState 0-4 instead of 1-4
xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById("test").innerHTML = xmlhttp.responseText;

    }
}

xmlhttp.open('POST', 'lookup_user.php', true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send('lname='+lname);



}

これは、最初のキーダウンを検出しないという事実を除いて、ほとんど問題なく動作します。

たとえば、入力フォームに「D」と入力すると、ユーザーが検索されません。2 番目の文字を入力すると、2 番目の文字を含まず、2 番目の文字の前の文字が検索されます。「Daisy」を検索したい場合、入力ボックスに「Daisy」と入力すると、「Dais」が検索されます。別のキーを押したときにのみ、「デイジー」が検索されます。

どうしてこれなの？

4

1 に答える 1

0

イベントはonkeydown正常に動作しています。

キーが押されると、次の順序でイベントが発生します。keydown, keypress, keyup.

このonkeydownイベントは、キーが押された後、文字が DOM に配置される前に発生します。

イベントが発生したときに文字が DOM に配置されていないため、フォームのテキスト入力にはその文字が含まれません。

例:onkeydownイベントを使用して、フォームに入力される文字を制限できます。

一方、onkeyupイベントは、ユーザーがキーを離した後、DOM が変更された後に発生します。

おそらく、onkeyupイベントの方がアプリケーションに適しているでしょう。

于 2013-07-27T00:05:02.853 に答える