web-dev-qa-db-ja.com

アルファベット文字のみを許可するように入力を強制するにはどうすればよいですか？

ここでjQueryを使用していますが、入力フィールドに数値が入力されないようにすることはできません

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

入力

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

}

ここでは、数字のみに制限する方法について多くの例を見てきましたが、a-zとA-Zに正しいキーコードを使用しています。私が間違っているのがわかりますか？

javascriptjqueryinputinput-field
15
Leon Gaban

プロパティevent.keyは未定義の値を与えてくれました。代わりに、event.keyCode：

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

8の値はバックスペースキー用です。

14
hexacyanide

キーコードに依存するのではなく、これは非常に面倒な場合がありますが、代わりに正規表現を使用できます。パターンを変更することにより、ニーズに合わせて入力を簡単に制限できます。これはkeypressイベントで機能し、バックスペースの使用を許可することに注意してください（受け入れられた回答のように）。ユーザーが「違法な」文字を貼り付けることを妨げません。

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>
8
Robin Keskisarkka

ショートワンライナー：

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

すべての nicode letters これを試してください regexp ：/\p{L}/u（ but ... this ）-そして 作業例 :)

5
Kamil Kiełczewski

新しいブラウザでは、次を使用できます。

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

正規表現を使用して、入力フィールドを制限できます。

3
jsbisht

素敵なワンライナーHTMLのみ：

 <input type="text" id='nameInput' onkeypress='return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode == 32))'>
3
Dustin Spengler
<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

keypressを使用する他の多くのソリューションはモバイルでは機能しないため、inputを使用する必要があります。

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