2010-10-20 43 views

回答

45

備註:事後看來,這是一個快速和骯髒的答案,可能無法在所有情況下工作。爲了有一個可靠的解決方案,請參閱Tim Down's answer(複製粘貼在這裏,因爲這答案是仍然得到的意見和upvotes):

你不能用keyup事件中做到這一點可靠。如果您想知道 有關鍵入字符的內容,則必須改用 按鍵事件。

以下示例將在大多數瀏覽器中始終工作,但 還有一些您應該注意的邊緣情況。對於 中的內容,我認爲對此有詳細的指導,請參閱 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和​​給你的物理密鑰 按下信息。在標準佈局的美國/英國標準鍵盤上, 看起來好像這些事件的keyCode屬性與它們所代表的字符之間存在相關性。但是,這不是 可靠:不同的鍵盤佈局將有不同的映射。


下面是原來的答案,但不正確,但可能不是在所有情況下可靠地工作。

要匹配單詞字符的鍵碼(例如, a將匹配。 space不會)

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

好吧,這是一個快速的答案。方法是一樣的,但要小心鍵碼問題,請參見這個 article quirksmode。

+1

在Firefox F1鍵和P鍵的keyCode是相同的(F2也是'q',F3是'r'等)。在Chromium上(Webkit瀏覽器),F1是'P',F2是'Q'等。 – hluk 2010-10-20 12:47:24

+5

你無法從'keyup'事件中可靠地輸入字符。這可能適用於您的鍵盤,但對於不同的鍵盤類型和不同的文化,根本沒有保證。 – 2010-10-20 13:13:48

+3

如果@ TimDown的觀點不夠清楚,下面是另一個:**這基本上是錯誤的答案**。 – Christian 2012-06-21 13:10:38

4

如果你只需要排除出enterescapespacebar鍵,可以做到以下幾點:

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

See it actions here.

您可以參考complete list of keycode here爲您進一步的修改。

+2

不回車鍵或Shift鍵或Esc鍵或空格...((((((ETC)))))) – faressoft 2010-10-20 12:33:06

92

對於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)); 
    } 
}); 

keyup和​​給你按下的物理按鍵信息。在標準佈局的美國/英國標準鍵盤上,看起來這些事件的keyCode屬性與它們所代表的字符之間存在關聯。但是,這不可靠:不同的鍵盤佈局會有不同的映射。

+0

我剛剛遇到一個類似的問題,我*不能*檢測並禁用'keyup'的ENTER鍵,但是我*能夠通過'keypress'做到這一點。 – 2014-01-10 06:00:59

+1

@IanCampbell'''keydown'''也可以。這是因爲使用''''''''''''''鍵盤上的輸入按鈕已經被按下並被接收到。 – 2014-09-23 17:33:24

+0

按鍵事件不完全可靠。在chrome中,如果突出顯示一個字符並在其上鍵入新字符,則不會觸發按鍵事件。 – danielson317 2016-04-13 21:18:19

4

我想要做的正是這一點,我想涉及KEYUP的解決方案和按鍵事件。

(我還沒有在所有瀏覽器測試,但我曾經在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); 
11

這幫助我:

$("#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) 
     { ... 
+0

也適用於複製/粘貼CTRL + C/CTRL + V.很簡單的條件:'String.fromCharCode(e.keyCode).match(/ \ w /)|| e.keyCode === 8 || e.keyCode === 46' – fabdouglas 2016-10-06 14:46:10

+0

小錯誤在這裏。您正在使用'String.fromCharCode',但輸入'event.keyCode'。應該是'event.charCode'。但是,對於keyUp事件,event.charCode始終爲0(至少在Chrome中)。這個答案是有缺陷的。如果你檢查變量'c',你會發現它不等同於被按下的鍵。 – HankScorpio 2016-10-20 18:54:31

6

我不完全滿意,給出的答案。他們都有一些缺陷給他們。

使用keyPressevent.which是不可靠的,因爲您無法捕獲退格或刪除(如Tarl所述)。 使用keyDown(如Niva和Tarl的答案)稍微好一些,但解決方案有缺陷,因爲它試圖使用event.keyCodeString.fromCharCode()(keyCode和charCode不一樣!)。

但是,我們所做的與​​或keyup事件是按下的實際密鑰(event.key)。 據我所知,長度爲1的任何key都是一個字符(數字或字母),無論您使用哪種語言的鍵盤。如果不是這樣,請糾正我!

然後,asdf有很長的答案。這可能是完美的,但它似乎是矯枉過正。


所以這裏有一個簡單的解決方案,將捕獲所有的字符,退格鍵和刪除。 (注:要麼keyup或​​將在這裏工作,但keypress不會)

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

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

    if (isWordCharacter || isBackspaceOrDelete) { 

    } 
}); 
+3

當我第一次閱讀它時,我真的不喜歡這個答案,但隨後給了它一個並且它奇妙地工作。 – gdpelican 2016-12-04 18:33:20

相關問題