Javascriptキーボードのアルファベットだけを入力する機能

Question

<textarea>の中に文字の値と別のものの数値を入力したいとします。私は<textarea>に数値を入力できるJavaScript関数をonkeypressで作成することができました。これはFirefoxとChromeで動作します。

アルファベットの場合は、windows.eventプロパティを使用して別のJavaScript関数を作成しています。問題はChromeでのみ動作し、Firefoxでは動作しません。

onkeypressイベントを使用してアルファベットのみを入力できるようにする方法を知りたいのですが、数字だけを入力するために使用しますか？

function isNumberKey(evt){ <!--Function to accept only numeric values--> 
 
    //var e = evt || window.event; 
 
\t var charCode = (evt.which) ? evt.which : evt.keyCode 
 
    if (charCode != 46 && charCode > 31 
 
\t && (charCode < 48 || charCode > 57)) 
 
     return false; 
 
     return true; 
 
\t } 
 
\t \t  
 
    function ValidateAlpha(evt) 
 
    { 
 
     var keyCode = (evt.which) ? evt.which : evt.keyCode 
 
     if ((keyCode < 65 || keyCode > 90) && (keyCode < 97 || keyCode > 123) && keyCode != 32) 
 
      
 
     return false; 
 
      return true; 
 
    }

<label for="cname" class="label">The Risk Cluster Name</label> 
 
<textarea id="cname" rows="1px" cols="20px" style="resize:none" placeholder="Cluster Name" onKeyPress="return ValidateAlpha(event);"></textarea> 
 
<br> 
 
<label for="cnum">Risk Cluster Number:</label> 
 
<textarea id="cmun" rows="1px" cols="12px" style="resize:none" placeholder="Cluster Number" onkeypress="return isNumberKey(event)"></textarea>

Answer 1

やあ、それは数字と、のようないくつかの特殊文字を可能にする、それはすべてのブラウザで私のために働いていたコードの下にしてみてください+ - （）：テキストボックスの使用中

を次のように

<asp:Textbox Id="txtPhone" runat="server" onKeyPress="return onlyNumbersandSpecialChar()">  </asp:Textbox> 

function onlyNumbersandSpecialChar(evt) { 
    var e = window.event || evt; 
    var charCode = e.which || e.keyCode; 
    if (charCode > 31 && (charCode < 48 || charCode > 57 || charCode > 107 || charCode > 219 ||   charCode > 221) && charCode != 40 && charCode != 32 && charCode != 41 && (charCode < 43 || charCode > 46)) { 
     if (window.event) //IE 
      window.event.returnValue = false; 
     else //Firefox 
      e.preventDefault(); 
    } 
    return true; 

    } 

</script> 

Answer 2

の場合古いブラウザをサポートする必要はありません。inputイベントを使用します。この方法で、ユーザーがテキストをtextareaに貼り付けると、非アルファ文字をキャッチすることもできます。

HTMLを少し整理しました。最も重要な変更は、cnameとcnumのイベントです。両方の場合のイベントがoninputに変更されていることに注意してください。

<label for="cname" class="label"> The Risk Cluster Name</label> 
<textarea id="cname" rows="1" cols="20" style="resize:none" placeholder="Cluster Name" oninput="validateAlpha();"></textarea> 
<label for="cnum">Risk Cluster Number:</label> 
<textarea id="cmun" rows="1" cols="12" style="resize:none" placeholder="Cluster Number" oninput="isNumberKey();"></textarea><br /><br /><br /> 

あなたはcnameだけ数字だけを受け入れるようにアルファベットの文字とcnumを受け入れるようにしたいと仮定すると、あなたのJavaScriptは次のようになります。

は

function validateAlpha(){ 
    var textInput = document.getElementById("cname").value; 
    textInput = textInput.replace(/[^A-Za-z]/g, ""); 
    document.getElementById("cname").value = textInput; 
} 
function isNumberKey(){ 
    var textInput = document.getElementById("cmun").value; 
    textInput = textInput.replace(/[^0-9]/g, ""); 
    document.getElementById("cmun").value = textInput; 
} 

このコードは、文字列内のパターンにマッチする方法をregular expressions使用しています。あなただけの文字を意味するか -

Answer 3

ベスト_ "のみ文字値" _

<input type="text" name="checkno" id="checkno" class="form-control" value="" onkeypress="return isNumber(event)"/> 

<input type="text" name="checkname" id="checkname" class="form-control" value="" onkeypress="return isAlfa(event)"/> 


function isNumber(evt) { 
    evt = (evt) ? evt : window.event; 
    var charCode = (evt.which) ? evt.which : evt.keyCode; 
    if (charCode > 31 && (charCode < 48 || charCode > 57)) { 
     return false; 
    } 
    return true; 
} 

function isAlfa(evt) { 
    evt = (evt) ? evt : window.event; 
    var charCode = (evt.which) ? evt.which : evt.keyCode; 
    if (charCode > 31 && (charCode < 65 || charCode > 90) && (charCode < 97 || charCode > 122)) { 
     return false; 
    } 
    return true; 
} 

Answer 4

function lettersOnly() 
{ 
      var charCode = event.keyCode; 

      if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123) || charCode == 8) 

       return true; 
      else 
       return false; 
} 

<input type="text" name="fname" value="" onkeypress="return lettersOnly(event)"/>