テキストフィールドにローマ字のみを許可する

Question

ウェブサイト内のすべてのテキストボックスにローマ字しか使用できないようにする方法を探しています。それをグローバルに行う簡単な方法はありますか？

ありがとうございます。

Answer 1

私は非ローマ字をフィルタリングする正規表現のために、次の質問のためにマークされた答えを参照します：

How to detect non-roman characters in JS?

スポイラー：正規表現が/[^\u0000-\u024F\u1E00-\u1EFF\u2C60-\u2C7F\uA720-\uA7FF]/g

今、あなたが必要とするすべてであるですjQueryをいじりの少し：最近のブラウザで

var myInputId = "#foo"; // Or whatever you wish to use. 
var input = $(myInputId); 
var exp = /[^\u0000-\u024F\u1E00-\u1EFF\u2C60-\u2C7F\uA720-\uA7FF]/g; 
input.blur(function() { 
    input.value = input.value.replace(exp, ""); 
}); 

Answer 2

受け入れ<input>属性はpatternとなります。これにより、指定されたフィールド内の有効な文字を制限することができます。他のすべてのブラウザのために

input:invalid { 
 
    background-color:red; 
 
}

<form> 
 
    <input type="text" pattern="[a-zA-Z\s\.\-_]+" /> 
 
    <button type="submit">Submit</button> 
 
</form>

あなたは、jQueryを介して、すべてのフォームフィールドを見つけるpattern -attributeが存在するかどうかを確認し、指定したフィールドの値に対してそれを確認することができます。あなたはまた、許可されていない文字を置き換えることがあります。

$('form').on('keyup blur','input',function() { 
 
    if ($(this).val() && $(this).attr('pattern')) { 
 
    //var pattern = new RegExp('^'+$(this).attr('pattern')+'$', 'g'); 
 
    //$(this).toggleClass('invalid', pattern.match(!$(this).val())); 
 
    var pattern = new RegExp($(this).attr('pattern').replace(/\[/,'[^'), 'g'); 
 
    $(this).val($(this).val().replace(pattern,'')); 
 
    } 
 
});

input:invalid, 
 
input:invalid { 
 
    background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<form> 
 
    <input type="text" pattern="[a-zA-Z\s\.\-_]+" /> 
 
    <button type="submit">Submit</button> 
 
</form>

をああ、あなたはまだ、サーバー側でフォーム入力を検証します。すべてのHTMLやJavascriptなどは、サイトのすべての訪問者が壊れたものを送信することを妨げるものではありません。

Answer 3

は、例えば、あなたのマスターページにこのスニペットを含める：

<script> 
    $(function(){ 
     $('input[type=text],textarea').keypress(function(e){ 
      var char = String.fromCharCode(e.which || e.charCode); 
      var rgx = /[\u0000-\u007F]/; 
      if (rgx.test(char) == false) 
       return false; 
      }) 
    }) 
</script>