web-dev-qa-db-ja.com

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

.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 */
}

});
javascriptjqueryeventskeyboardkeycode
63
faressoft

注：後知恵では、これは迅速で汚い答えであり、すべての状況で機能するとは限りません。信頼できるソリューションを得るには、 ティムダウンの答え を参照してください（この答えはまだビューと賛成を得ているため、ここにコピーして貼り付けてください）：

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

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

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

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

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

キーコードをWord文字と一致させるには（たとえば、aは一致しますが、spaceは一致しません）

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

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

46
Nivas

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

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

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

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

98
Tim Down

これは私を助けました：

$("#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)
        { ...
11
TARL

私は与えられた他の答えに完全に満足していません。彼らはすべて彼らに何らかの欠陥を持っています。

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

ただし、keydownまたはkeyupイベントで行うのは、実際に押されたキー（_event.key_）です。私の知る限り、長さ1のkeyは、使用している言語キーボードに関係なく、文字（数字または文字）です。そうでない場合は修正してください！

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

そこで、すべての文字、バックスペース、削除をキャッチする簡単なソリューションを紹介します。 （注：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
    }
});
_
10
HankScorpio

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

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

こちらのアクションをご覧ください

ここでキーコードの完全なリスト を参照して、さらに変更することができます。

4
bla

私はこれを正確にやりたかったので、both（keyupとkeypressイベント。

（すべてのブラウザでテストしたわけではありませんが、 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);
4
asdf

キーコードの検証が好きではありませんでした。私のアプローチは、入力にテキスト（任意の文字）があるかどうかを確認し、ユーザーがテキストを入力し、他の文字は入力していないことを確認することでした

$('#input').on('keyup', function() {
    var words = $(this).val();
    // if input is empty, remove the Word count data and return
    if(!words.length) {
        $(this).removeData('wcount');
        return true;
    }
    // if Word count data equals the count of the input, return
    if(typeof $(this).data('wcount') !== "undefined" && ($(this).data('wcount') == words.length)){
        return true;
    }
    // update or initialize the Word count data
    $(this).data('wcount', words.length);
    console.log('user tiped ' + words);
    // do you stuff...
});
<html lang="en">
  <head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
  <input type="text" name="input" id="input">
  </body>
</html>
0
lordlouis