jQuery は input_jquery を使用せずに一定期間キーボードを監視します-jsチュートリアル-php.cn

jQuery は input_jquery を使用せずに一定期間キーボードを監視します

WBOY

リリース： 2016-05-16 15:04:19

オリジナル

1657 人が閲覧しました

一定期間入力がないことを監視すると、簡単な入力を完了できます

前回は、模擬入力が完了したらバックグラウンドにデータ取得リクエストを送信し、それをフロントに表示する問題を実装しました。中心となる判断基準は入力完了の定義です。

つまり、ユーザーはどのように入力を完了するかということです。

私が使用する基準は、テキストボックスの内容が1秒間変化しない場合、それはユーザーが1秒以内に入力を行わなかったことを意味し、ユーザーが入力を完了し、返信データを待っていることを示します。。では、jQuery は 1 秒以内に入力がないかどうかをどのように判断するのでしょうか。

<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script>
var lastTime;
$(function(){
$('#text1').keyup(function (e) {
lastTime = e.timeStamp;
setTimeout(function () {
if (lastTime - e.timeStamp == 0) {
alert("1秒内没再输入，可以发送查询");
}
}, 1000);
});
})
</script>
</head>
<body>
<input id="text1" type="text" value="" />
</body>
</html>

ログイン後にコピー

原則

これは非常に簡潔なコードです。その原理は次のように簡単に説明できます:

ユーザーがキーボードを押すたびに現在時刻が記録され、1秒後に時刻が判定されます。

lastTime はグローバル変数であるため、ユーザーが入力しているときに lastTime は常に変化します。そのため、1 秒後に lastTime-e.timeStamp を使用すると、最後に押された e.timeStamp のみが 0 になります。