【问题标题】:Javascript Function to enter only alphabets on keypressJavascript函数仅在按键上输入字母
【发布时间】:2013-05-20 10:21:48
【问题描述】:

我只想在<textarea> 中输入字符值,在另一个中输入数值。我已经能够制作一个 JavaScript 函数,它只允许使用 onkeypress<textarea> 中输入数值。这适用于 Firefox 和 Chrome。

对于字母,我正在使用 windows.event 属性创建另一个 JavaScript 函数。唯一的问题是这只适用于 Chrome 而不是 Firefox。

我想知道如何使用onkeypress 事件只允许输入字母,就像只输入数字值一样?

function isNumberKey(evt){  <!--Function to accept only numeric values-->
    //var e = evt || window.event;
	var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode != 46 && charCode > 31 
	&& (charCode < 48 || charCode > 57))
        return false;
        return true;
	}
		   
    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>

【问题讨论】:

  • "only character values" - 你的意思是只有字母吗?请记住,仅对按键进行验证是不够的,因为用户可以复制/粘贴或拖放而不会导致按键事件。
  • 改用正则表达式?
  • 以下是一些字符示例:“1”、“&”、“a”、“)”、“W”。你的意思是字母。
  • 是的,我想使用像 A,a,b,B 这样的字母

标签: javascript html validation onkeypress


【解决方案1】:
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)"/>

【讨论】:

    【解决方案2】:

    如果您不需要支持旧版浏览器,我会使用 input 事件。这样,如果用户将文本粘贴到 textarea 中,您也可以捕获非字母字符。

    我稍微清理了您的 HTML。最重要的变化是cnamecnum 上的事件。请注意,两种情况下的事件都已更改为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,这是一种匹配字符串中的模式的方法。

    【讨论】:

      【解决方案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;
      }
      

      【讨论】:

        【解决方案4】:
        function digitonly(input,event){    
        
                var keyCode = event.which ? event.which : event.keyCode;
                var lisShiftkeypressed = event.shiftKey;
                if(lisShiftkeypressed && parseInt(keyCode) != 9){return false;}
                if((parseInt(keyCode)>=48 && parseInt(keyCode)<=57) || keyCode==37/*LFT ARROW*/ || keyCode==39/*RGT ARROW*/ || keyCode==8/*BCKSPC*/ || keyCode==46/*DEL*/ || keyCode==9/*TAB*/  || keyCode==45/*minus sign*/ || keyCode==43/*plus sign*/){return true;}     
                BootstrapDialog.alert("Enter Digits Only"); 
                input.focus();
                return false;           
        }
        
        function alphaonly(input,event){
        
                var keyCode = event.which ? event.which : event.keyCode;
                //Small Alphabets
                if(parseInt(keyCode)>=97 && parseInt(keyCode)<=122){return true;}
                //Caps Alphabets
                if(parseInt(keyCode)>=65 && parseInt(keyCode)<=90){return true;}
                if(parseInt(keyCode)==32 || parseInt(keyCode)==13 || parseInt(keyCode)==46 || keyCode==9/*TAB*/ || keyCode==8/*BCKSPC*/ || keyCode==37/*LFT ARROW*/ || keyCode==39/*RGT ARROW*/ ){return true;}
                BootstrapDialog.alert("Only Alphabets are allowed") 
                input.focus();
                return false; 
        }
        

        【讨论】:

          【解决方案5】:

          您好,试试下面的代码,它在所有浏览器中都适用于我,它允许使用数字和一些特殊字符,例如,.+-(): 在文本框中使用如下

          <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>
          

          【讨论】:

          • 感谢您的代码,但我只想输入字母(小写和大写)和一些特殊字符,如“,。+-:”以及字母之间的空格......所以请您编辑你的答案相应......
          猜你喜欢
          • 1970-01-01
          • 2016-02-26
          • 1970-01-01
          • 1970-01-01
          • 2011-07-07
          • 1970-01-01
          • 2015-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多