wake-up-neo.com

Wie erzwinge ich die Eingabe, um nur Alpha-Buchstaben zuzulassen?

wenn Sie hier jQuery verwenden, können Sie jedoch nicht verhindern, dass Zahlen in das Eingabefeld eingegeben werden

http://codepen.io/leongaban/pen/owbjg

Eingang

<input type="text" name="field" maxlength="8"
    title="Only Letters"
    value="Type Letters Only"
    onkeydown="return alphaOnly(event);"
    onblur="if (this.value == '') {this.value = 'Type Letters Only';}"
    onfocus="if (this.value == 'Type Letters Only') {this.value = '';}"/>

jQuery

function alphaOnly(event) {

  alert(event);

  var key;

  if (window.event) {
    key = window.event.key;
  } else if (e) {
    key = e.which;
  }
  //var key = window.event.key || event.key;
  alert(key.value);
  return ((key >= 65 && key <= 90) || (key >= 95 && key <= 122));

}

Ich habe hier viele Beispiele gesehen, wie man sich nur auf Zahlen beschränken kann. Sehen Sie, was ich falsch mache?

javascriptjqueryinputinput-field
12
Leon Gaban

Die Eigenschaft event.key gab mir einen undefinierten Wert. Stattdessen habe ich event.keyCode verwendet:

function alphaOnly(event) {
  var key = event.keyCode;
  return ((key >= 65 && key <= 90) || key == 8);
};

Beachten Sie, dass der Wert 8 für die Rücktaste gilt.

13
hexacyanide

Anstatt sich auf Schlüsselcodes zu verlassen, die ziemlich umständlich sein können, können Sie stattdessen reguläre Ausdrücke verwenden. Durch Ändern des Musters können wir die Eingabe leicht auf unsere Bedürfnisse beschränken. Beachten Sie, dass dies mit dem Ereignis keypress funktioniert und die Verwendung von Rücktaste (wie in der akzeptierten Antwort) ermöglicht. Benutzer werden nicht daran gehindert, "illegale" Zeichen einzufügen.

function testInput(event) {
   var value = String.fromCharCode(event.which);
   var pattern = new RegExp(/[a-zåäö ]/i);
   return pattern.test(value);
}

$('#my-field').bind('keypress', testInput);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
   Test input:
   <input id="my-field" type="text">
</label>

7
Robin Keskisarkka

Short ONELINER:

<input ... onkeypress="return /[a-z]/i.test(event.key)" >

Für alle Unicode-Buchstaben probiere diese regexp : /\p{L}/u ( aber ... dies ) - und hier ist Arbeitsbeispiel :)

3
Kamil Kiełczewski

In neueren Browsern können Sie Folgendes verwenden:

<input type="text" name="country_code" 
    pattern="[A-Za-z]" title="Three letter country code">

Sie können reguläre Ausdrücke verwenden, um die Eingabefelder einzuschränken.

3
jsbisht
<input type="text" name="field" maxlength="8"
    onkeypress="return onlyAlphabets(event,this);" />

function onlyAlphabets(e, t) {
            try {
                if (window.event) {
                    var charCode = window.event.keyCode;
                }
                else if (e) {
                    var charCode = e.which;
                }
                else { return true; }
                if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
                    return true;
                else
                    return false;
            }
            catch (err) {
                alert(err.Description);
            }
        }
2
Pankaj Upadhyay

Nur einzeiliger HTML-Code:

 <input type="text" id='nameInput' onkeypress='return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode == 32))'>
1
Dustin Spengler

Viele der anderen Lösungen, die Tastendruck verwenden, funktionieren nicht auf Mobilgeräten. Sie müssen Eingabe verwenden.

html

<input type="text" id="name"  data-value="" autocomplete="off" spellcheck="true" placeholder="Type your name" autofocus />

jQuery

$('#name').on('input', function() {
    var cursor_pos = $(this).getCursorPosition()
    if(!(/^[a-zA-Z ']*$/.test($(this).val())) ) {
        $(this).val($(this).attr('data-value'))
        $(this).setCursorPosition(cursor_pos - 1)
        return
    }
    $(this).attr('data-value', $(this).val())
})

$.fn.getCursorPosition = function() {
    if(this.length == 0) return -1
    return $(this).getSelectionStart()
}
$.fn.setCursorPosition = function(position) {
    if(this.lengh == 0) return this
    return $(this).setSelection(position, position)
}
$.fn.getSelectionStart = function(){
  if(this.lengh == 0) return -1
  input = this[0]
  var pos = input.value.length
  if (input.createTextRange) {
    var r = document.selection.createRange().duplicate()
    r.moveEnd('character', input.value.length)
    if (r.text == '') 
    pos = input.value.length
    pos = input.value.lastIndexOf(r.text)
  } else if(typeof(input.selectionStart)!="undefined")
  pos = input.selectionStart
  return pos
}
$.fn.setSelection = function(selectionStart, selectionEnd) {
  if(this.lengh == 0) return this
  input = this[0]
  if(input.createTextRange) {
    var range = input.createTextRange()
    range.collapse(true)
    range.moveEnd('character', selectionEnd)
    range.moveStart('character', selectionStart)
    range.select()
  }
  else if (input.setSelectionRange) {
    input.focus()
    input.setSelectionRange(selectionStart, selectionEnd)
  }
  return this
}
0
indospace.io