javascript - .keyup() が文字キーかどうかを知る方法 (jQuery)

Question

.keyup() が文字キーかどうかを知る方法 (jQuery)

$("input").keyup(function() {

if (key is a character) { //such as a b A b c 5 3 2 $ # ^ ! ^ * # ...etc not enter key or shift or Esc or space ...etc
/* Do stuff */
}

});

Answer 1

keyupイベントでこれを確実に行うことはできません。入力された文字について知りたい場合は、keypress代わりにイベントを使用する必要があります。

次の例は、ほとんどのブラウザーで常に機能しますが、注意が必要なエッジ ケースがいくつかあります。私の見解では、これに関する決定的なガイドについては、http://unixpapa.com/js/key.htmlを参照してください。

$("input").keypress(function(e) {
    if (e.which !== 0) {
        alert("Charcter was typed. It was: " + String.fromCharCode(e.which));
    }
});

keyupkeydown押された物理キーに関する情報を提供します。標準レイアウトの標準 US/UK キーボードでは、keyCodeこれらのイベントのプロパティとそれらが表す文字との間に相関関係があるように見えます。ただし、これは信頼できるものではありません。キーボード レイアウトが異なればマッピングも異なります。

Answer 2

注：後から考えると、これは迅速で汚い答えであり、すべての状況で機能するとは限りません。信頼できる解決策を得るには、Tim Downの回答を参照してください（この回答はまだビューと賛成票を獲得しているため、ここにコピーして貼り付けてください）：

keyup イベントでは、これを確実に行うことはできません。入力された文字について知りたい場合は、代わりに keypress イベントを使用する必要があります。

次の例は、ほとんどのブラウザーで常に機能しますが、注意が必要なエッジ ケースがいくつかあります。私の見解では、これに関する決定的なガイドについては、 http://unixpapa.com/js/key.htmlを参照してください。

$("input").keypress(function(e) {
    if (e.which !== 0) {
        alert("Character was typed. It was: " + String.fromCharCode(e.which));
    }
});

keyupkeydown押された物理キーに関する情報を提供します。標準レイアウトの標準 US/UK キーボードでは、keyCodeこれらのイベントのプロパティとそれらが表す文字との間に相関関係があるように見えます。ただし、これは信頼できるものではありません。キーボード レイアウトが異なればマッピングも異なります。

---

以下は元の回答でしたが、正しくなく、すべての状況で確実に機能するとは限りません。

キーコードを単語文字と一致させる (例: awould match. spacewould not)

$("input").keyup(function(event)
{ 
    var c= String.fromCharCode(event.keyCode);
    var isWordcharacter = c.match(/\w/);
}); 

わかりました、それは素早い答えでした。アプローチは同じですが、キーコードの問題に注意してください。quirksmode の この記事を参照してください。

Answer 3

与えられた他の回答に完全に満足しているわけではありません。彼らは皆、何らかの欠陥を持っています。

バックスペースや削除をキャッチできないため、keyPresswith の使用は信頼できません（Tarlが述べたように）。event.which（NivaとTarlの回答のように）を使用keyDownする方が少し良いですが、（keyCodeとcharCodeは同じではありません！）で使用しようとするため、ソリューションには欠陥がありevent.keyCodeますString.fromCharCode()。

ただし、keydownorkeyupイベントで実際に使用できるのは、押された実際のキー ( event.key) です。私が知る限り、key使用している言語のキーボードに関係なく、長さが 1 の文字 (数字または文字) はすべて文字です。それが真実でない場合は、私を修正してください!

次に、asdf からの非常に長い回答があります。それは完全に機能するかもしれませんが、やり過ぎのようです。

---

したがって、すべての文字、バックスペース、および削除をキャッチする簡単なソリューションを次に示します。(注: ここでは or のどちらkeyupかkeydownが機能しますが、機能しkeypressません)

$("input").keydown(function(event) {

    var isWordCharacter = event.key.length === 1;
    var isBackspaceOrDelete = event.keyCode === 8 || event.keyCode === 46;

    if (isWordCharacter || isBackspaceOrDelete) {
        // do something
    }
});

Answer 4

これは私にとって役に立ちました：

$("#input").keyup(function(event) {
        //use keyup instead keypress because:
        //- keypress will not work on backspace and delete
        //- keypress is called before the character is added to the textfield (at least in google chrome) 
        var searchText = $.trim($("#input").val());

        var c= String.fromCharCode(event.keyCode);
        var isWordCharacter = c.match(/\w/);
        var isBackspaceOrDelete = (event.keyCode == 8 || event.keyCode == 46);

        // trigger only on word characters, backspace or delete and an entry size of at least 3 characters
        if((isWordCharacter || isBackspaceOrDelete) && searchText.length > 2)
        { ...

Answer 5

私はまさにこれをやりたかったので、キーアップイベントとキープレスイベントの両方を含む解決策を考えました。

（すべてのブラウザーでテストしたわけではありませんが、 http： //unixpapa.com/js/key.htmlでコンパイルされた情報を使用しました）

編集：jQueryプラグインとして書き直しました。

(function($) {
    $.fn.normalkeypress = function(onNormal, onSpecial) {
        this.bind('keydown keypress keyup', (function() {
            var keyDown = {}, // keep track of which buttons have been pressed
                lastKeyDown;
            return function(event) {
                if (event.type == 'keydown') {
                    keyDown[lastKeyDown = event.keyCode] = false;
                    return;
                }
                if (event.type == 'keypress') {
                    keyDown[lastKeyDown] = event; // this keydown also triggered a keypress
                    return;
                }

                // 'keyup' event
                var keyPress = keyDown[event.keyCode];
                if ( keyPress &&
                     ( ( ( keyPress.which >= 32 // not a control character
                           //|| keyPress.which == 8  || // \b
                           //|| keyPress.which == 9  || // \t
                           //|| keyPress.which == 10 || // \n
                           //|| keyPress.which == 13    // \r
                           ) &&
                         !( keyPress.which >= 63232 && keyPress.which <= 63247 ) && // not special character in WebKit < 525
                         !( keyPress.which == 63273 )                            && //
                         !( keyPress.which >= 63275 && keyPress.which <= 63277 ) && //
                         !( keyPress.which === event.keyCode && // not End / Home / Insert / Delete (i.e. in Opera < 10.50)
                            ( keyPress.which == 35  || // End
                              keyPress.which == 36  || // Home
                              keyPress.which == 45  || // Insert
                              keyPress.which == 46  || // Delete
                              keyPress.which == 144    // Num Lock
                              )
                            )
                         ) ||
                       keyPress.which === undefined // normal character in IE < 9.0
                       ) &&
                     keyPress.charCode !== 0 // not special character in Konqueror 4.3
                     ) {

                    // Normal character
                    if (onNormal) onNormal.call(this, keyPress, event);
                } else {
                    // Special character
                    if (onSpecial) onSpecial.call(this, event);
                }
                delete keyDown[event.keyCode];
            };
        })());
    };
})(jQuery);

Answer 6

enterout 、escapeおよびキーのみを除外する必要がある場合spacebarは、次の操作を実行できます。

$("#text1").keyup(function(event) {
if (event.keyCode != '13' && event.keyCode != '27' && event.keyCode != '32') {
     alert('test');
   }
});

ここでアクションを参照してください。

詳細な変更については、ここでキーコードの完全なリストを参照できます。