2010-11-26 36 views
36

的問題:在一個HTML輸入JavaScript的鍵控代碼VS則charCode

  • Limit許可字符A-Z A-Z只。
  • 對於業務需求,這需要在KeyPress上完成,以便字符不會被允許出現在輸入中。
  • 選項卡,輸入,箭頭,退格鍵,移位都是允許的。用戶必須能夠自由地進出該文本框,刪除字符等等等等

這是我的代碼的起點......

var keyCode = (e.keyCode ? e.keyCode : e.which); 

但是每一個值,我得到在keyCode不對應於任何我在網上看到的角色圖表。例如,字符「h」給我的返回碼爲104.

KeyCode與CharCode不同嗎?哪些代碼包含控制字符?我需要轉換嗎?

我怎樣才能限制輸入到A-Z並允許我在JavaScript中需要的鍵?

+0

`keyCode`在所有瀏覽器中都不存在。小心一點。 – jwueller 2010-11-26 13:25:59

+2

@elusive:對於`keypress`事件,你是對的。對於`keydown`事件,`keyCode`存在於所有主流瀏覽器中。 – 2010-11-26 13:46:25

+0

請參考我以前的答案 [http://stackoverflow.com/questions/2859587/javascript-keycode-46-is-del-function-key-or-period-sign/28295546#28295546][1] [1]:http://stackoverflow.com/questions/2859587/javascript-keycode-46-is-del-function-key-or-period-sign/28295546#28295546 – 2015-02-03 09:38:30

回答

56

您可以在the following page找到所有問題的答案。

...但在總結:

  • ,從中可以可靠地獲得文字信息(而不是關鍵碼信息)的唯一事件是keypress事件。
  • keypress事件中,除IE= 8之外的所有瀏覽器都將字符代碼存儲在事件的which屬性中。大多數但不是全部這些瀏覽器也將字符代碼存儲在charCode屬性中。
  • keypress事件中,IE < = 8將字符代碼存儲在keyCode屬性中。

這意味着獲得對應按鍵的字符代碼,下面的工作無處不在,假設按鍵事件對象存儲在一個名爲e變量:

var charCode = (typeof e.which == "number") ? e.which : e.keyCode 

這通常會回報你一個字符代碼存在,否則爲0。有一些情況下,你會得到一個非零值時,你不應該:

  • 在Opera 10.50 <鑰匙插入刪除首頁結束
  • 在最近版本的Konqueror for non-character keys。

第一個問題的解決方法有一點涉及,並且還需要使用​​事件。

-1

我認爲keyCode返回ASCII鍵值,Ascii-104是h。

http://www.asciitable.com/

如在另一個指出則charCode回答在某些瀏覽器中使用的替代方法。

這是一個帶crssbrowser例的文章:http://santrajan.blogspot.com/2007/03/cross-browser-keyboard-handler.html

+0

看起來非常有前途。稍後再嘗試。 – Remotec 2010-11-26 13:36:19

+0

有趣的是,對6歲的答案進行反對投票,但沒有解釋?我懷疑這是因爲這個答案只對IE <= 8.0有效,因此大部分都是過時的。 – 2016-02-08 08:04:38

1

onkeypress事件具有用於在大寫和小寫字母不同的代碼。你可能會發現打開大寫鎖,然後輸入你的字母會給你你想要的代碼

onKeyUp和onKeyDown具有大寫和小寫字母相同的字符代碼。它會推薦使用onKeyUp,因爲它是最接近onKeyPress

+0

有趣。我如何捕獲並允許所需的密鑰? – Remotec 2010-11-26 13:34:52

0

/* 您不會在keypress上得到非打印鍵的keyCode, 爲什麼不在keydown上捕獲它們呢? */

function passkeycode(e){ 
    e= e || window.event; 
    var xtrakeys={ 
     k8: 'Backspace', k9: 'Tab', k13: 'Enter', k16: 'Shift', k20: 'Caps Lock', 
     k35: 'End', k36: 'Home', k37: 'Ar Left', k38: 'Ar Up', k39: 'Ar Right', 
     k40: 'Ar Down', k45: 'Insert', k46: 'Delete' 
    }, 
    kc= e.keyCode; 
    if((kc> 64 && kc<91) || xtrakeys['k'+kc]) return true; 
    else return false; 
} 

inputelement.onkeydown=passkeycode; 

KC> 64 & & KC < 91 // A-ZA-Z

xtrakeys [ 'K' +整數])定義了特殊的鍵碼允許

-1

我想你」完全採取錯誤的做法。感覺如何:

<input id="test"> 

<script type="text/javascript"> 
var aToZ = function(el){ 
    if(this.value.match(/[^a-zA-Z]/)){ 
     this.value = this.value.replace(/[^a-zA-Z]+/, '') 
    } 
} 
document.getElementById("test").onkeyup = aToZ 
</script> 

此外,不要忘記重複檢查服務器端。

5

實際上,104是小寫'h'的ASCII碼。爲了獲得輸入字符的ASCII碼,你可以使用e.which || e.keyCode,你不必擔心按住鍵,因爲對於鍵入的文本,按鍵在所有瀏覽器中都會自動重複(根據出色的http://unixpapa.com/js/key.html)。

因此,所有你真正需要的是:

<input id="textbox"> 

<script type="text/javascript"> 
document.getElementById('textbox').onkeypress = function(e){ 
    var c = e.which || e.keyCode; 
    if((c > 31 && c < 65) || (c > 90 && c < 97) || (c > 122 && c !== 127)) 
    return false; 
}; 
</script> 

試試:http://jsfiddle.net/wcDCJ/1/

(的ASCII碼是從http://en.wikipedia.org/wiki/Ascii

0

下面是示例標記:

<form id="formID"> 
    <input type="text" id="filteredInput"> 
    <input type="text" id="anotherInput"> 
</form> 

下面的邏輯可以(經由一個jQuery文檔準備包裝在這種情況下,)被用來捕獲鍵盤輸入。

它可能讀取有點愚蠢,但基本上,我檢查我想要允許的一切(在您的情況下,字母A到Z不區分大小寫)並且什麼都不做。換句話說,默認行爲是允許的,但是除alpha之外的任何輸入都被阻止。

標準鍵盤導航,如箭頭鍵,Home鍵,End,Tab鍵,Backspace鍵,刪除等的檢查和允許的。

注意:此代碼原文,以滿足用戶輸入只允許字母數字值(A - Z,A - Z,0 - 9),我離開那些線完好爲註釋。

 <script> 
      jQuery(document).ready(function() { 

       // keydown is used to filter input 
       jQuery("#formID input").keydown(function(e) { 
        var _key = e.which 
         , _keyCode = e.keyCode 
         , _shifted = e.shiftKey 
         , _altKey = e.altKey 
         , _controlKey = e.ctrlKey 
        ; 
        //console.log(_key + ' ' + _keyCode + ' ' + _shifted + ' ' + _altKey + ' ' + _controlKey); 

        if(this.id === jQuery('#filteredInput').prop('id')) { 
         if(
          // BACK,   TAB 
          (_key === 8 || _key === 9) // normal keyboard nav 
         ){} 

         else if(
          // END,   HOME,   LEFT,   UP,   RIGHT,   DOWN 
          (_key === 35 || _key === 36 || _key === 37 || _key === 38 || _key === 39 || _key === 40) // normal keyboard nav 
         ){} 

         else if(
          // DELETE 
          (_key === 46) // normal keyboard nav 
         ){} 

         else if(
          (_key >= 65 && _key <= 90) // a- z 

          //(_key >= 48 && _key <= 57 && _shifted !== true) || // 0 - 9 (unshifted) 
          //(_key >= 65 && _key <= 90) ||      // a- z 
          //(_key >= 96 && _key <= 105)       // number pad 0- 9 
         ){} 

         else { 
          e.preventDefault(); 
         } 
        } 

       }); 
      }); 
     </script>