asp.netフォームとasp:textboxがあります。ユーザーがキーを押したままにすると問題が発生します。ユーザーはテキストボックスを選択し、テキストボックスが9でいっぱいになるまで「9」を押し続けます。
この状況を検出する方法はありますか?キーを押したときにキーの繰り返しを停止する方法はありますか?
asp.netフォームとasp:textboxがあります。ユーザーがキーを押したままにすると問題が発生します。ユーザーはテキストボックスを選択し、テキストボックスが9でいっぱいになるまで「9」を押し続けます。
この状況を検出する方法はありますか?キーを押したときにキーの繰り返しを停止する方法はありますか?
jqueryを使用すると、次のようなことができます。
<script type="text/javascript">
var allowKey = true;
$(function () {
$("#one").keydown(function (e) {
if (!allowKey) {
e.preventDefault();
}
allowKey = false;
});
$("#one").keyup(function () {
allowKey = true;
});
});
</script>
<input id="one" />
更新されたバグ修正:
var keyCount = 0;
$(function () {
$("#one").keypress(function (e) {
if (keyCount > 1) {
e.preventDefault();
}
keyCount++;
});
$("#one").keyup(function () {
keyCount = 0;
});
});
以下は、複数のキーが同時に押された場合でも、「通常の」キー(つまり、テキスト入力を生成するキー)の自動繰り返しキー押下を防ぎます。keypress
イベントは、自動リピートのためにすべてのメインストリームブラウザで確実に発生する唯一のイベントであり、イベントのkeyCode
値は対応するイベントの/値keydown
と同じではないため、少し複雑になることに注意してください。charCode
which
keypress
デモ: http: //jsfiddle.net/KRJ5m/
コード:
var textBox = document.getElementById("my_textbox");
var lastKeyDown, keyIsPressed = {}, keyCodeForCharCode = {},
charCodeForKeyCode = {};
textBox.onkeydown = function(evt) {
evt = evt || window.event;
lastKeyDown = evt.keyCode;
};
textBox.onkeyup = function(evt) {
evt = evt || window.event;
var charCode = charCodeForKeyCode[evt.keyCode];
if (charCode) {
keyIsPressed[charCode] = false;
}
};
textBox.onkeypress = function(evt) {
evt = evt || window.event;
var keyCode, charCode = evt.which || evt.keyCode;
if (keyIsPressed[charCode]) {
// This keypress is an autorepeat
return false;
} else {
keyIsPressed[charCode] = true;
// Get the key code for the corresponding keydown event
keyCode = keyCodeForCharCode[charCode];
if (!keyCode) {
// Create two-way mapping for keyCode and charCode
keyCodeForCharCode[charCode] = lastKeyDown;
charCodeForKeyCode[lastKeyDown] = charCode;
}
}
};
YUIのイベントハンドラーを使用すると、次のようなことができます
var count = 0;
var kl = new YAHOO.util.KeyListener(document,{keys:27},
{
fn:function(e){
if (count > 9){
YAHOO.util.Event.preventDefault(e);
// call a function here to do something
}
else count++;
}
);
これでうまくいきます。アクションを実行したら、カウントが0に戻されるようにします。
例へのリンクは次のとおりですhttp://developer.yahoo.com/yui/examples/container/keylistener.html
これは、単純なJavaScriptを使用してキーの繰り返しをロックダウンする方法の簡単な例です。
var lock = false;
document.onkeyup = onKeyUpHandler;
document.onkeypress = onKeyPressHandler;
function onKeyUpHandler() {
lock = false;
}
function onKeyPressHandler(e) {
if (!e)
e = window.event;
var code = e.keyCode || e.which;
if (lock != false) {
e.returnValue = false;
if (e.preventDefault) {
e.preventDefault();
}
}
lock = true;
}