常にフォーカスがある入力ボックスがあります。この入力ボックスに入るコマンドは常に文字です。ユーザーが数字を押した場合、それをテキスト ボックスに追加せずに、それを使用して別のコマンドを実行します (ホットキーのように)。
私がこれを実装したのを見た方法は、keyup イベントを見て、不要な文字を削除することです。代わりに、キーボード入力をインターセプトして、挿入前に値を確認する方法はありますか?
div を使用してカスタム入力フィールドを作成し、すべてのキーボード コマンドをインターセプトすることを考えました。入力ボックスのように見えるようにキャレットを点滅させる方法はありますか?
contenteditabledivが必要なようです：
<div id="editor" contenteditable="true"></div>
イベントをリッスンし、keydown文字でない場合はそれらを防ぐことができます:
$("#editor").keydown(function (e) {
if (e.which > 90 || (e.which > 48 && e.which < 65)) {
e.preventDefault();
}
});
数字を「ホットキー」として処理するにe.whichは、どのキーがどれであるかを判断し、それに応じて操作するだけです。
このようなものが動作します：
<input type="text" id="txt" />
jQuery の場合:
$('#txt').keydown(function (e) {
var key = e.charCode || e.keyCode || 0;
if (key > 46 && key < 58) {
event.preventDefault();
alert('its a number, do something');
}
});
ここにフィドルがあります
keydownの代わりに使用しkeyupます。
keypressイベントを次と組み合わせて使用しString.fromCharCodeます。
document.getElementById('yourTextBoxID').onkeypress = function () {
var characterPressed = String.fromCharCode(event.keyCode);
if (characterPressed.test(/[a-z]/i)) {
// user pressed a letter
} else {
// user did not press a letter
}
};