2013-05-20 13 views
8

Voglio inserire solo i valori dei caratteri all'interno di uno <textarea> e valori numerici in un altro. Sono stato in grado di creare una funzione JavaScript che consente di immettere solo valori numerici nello <textarea> utilizzando onkeypress. Funziona su Firefox e Chrome.Javascript Funzione per inserire solo alfabeti sulla pressione dei tasti

Per gli alfabeti Sto creando un'altra funzione JavaScript utilizzando la proprietà windows.event. L'unico problema è che funziona solo su Chrome e non su Firefox.

Desidero sapere come consentire l'inserimento di soli alfabeti utilizzando l'evento onkeypress utilizzato per l'immissione di soli valori numerici?

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>

+3

_ "solo valori di carattere" _ - vuoi dire solo lettere? Ricordare che la convalida su keypress non è sufficiente, poiché l'utente può copiare/incollare o drag'n'drop senza causare un evento di pressione del tasto. – nnnnnn

+0

utilizza invece le espressioni regolari? – Nanda

+0

Ecco alcuni esempi di caratteri: "1", "&", "a", ")", "W". Vuoi dire _letters._ – nnnnnn

risposta

0

hi provare sottostante Codice ha funzionato per me in tutti i browser, permette numeri e alcuni caratteri speciali come, + -():. nell'uso di testo come segue

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

grazie per il codice ma volevo inserire solo alfabeti (maiuscole e minuscole) e alcuni caratteri speciali come ",. + -:" e anche lo spazio tra gli alfabeti .... quindi puoi modificare la tua risposta di conseguenza ... – Lucy

4

Se non è necessario supportare i browser più vecchi, io userei l'evento input. In questo modo puoi anche catturare caratteri non alfabetici se l'utente incolla il testo nello textarea.

Ho ripulito un po 'il codice HTML. Le modifiche più importanti riguardano gli eventi su cname e cnum. Si noti che l'evento in entrambi i casi è stato modificato in 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 /> 

Supponendo che si desidera cname per accettare solo caratteri dell'alfabeto e cnum per accettare solo i numeri, dovrebbe essere il tuo 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; 
} 

Questo codice utilizza regular expressions, un modo per abbinare modelli nelle stringhe.

1

migliori usi

<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; 
} 
2
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)"/> 
Problemi correlati