jqueryで入力フィールドからの特殊文字をブロックまたは制限するにはどうすればよいですか?


回答:


132

正規表現を使用した簡単な例で、好きなものを許可/禁止するように変更できます。

$('input').on('keypress', function (event) {
    var regex = new RegExp("^[a-zA-Z0-9]+$");
    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
    if (!regex.test(key)) {
       event.preventDefault();
       return false;
    }
});

49
これは貼り付けられたテキストでは機能せず、ユーザーがバックスペースや矢印キーなどのテキスト以外のキーを押すのを防ぐこともできます
bendytree

6
これは、Firefoxのバックスペースを許可しません
Alex

avión(飛行機)、árbol(木)などのスペイン語では機能しません
nikoskip

最新のFirefoxブラウザーでは機能しませんが、Chromeでは正常に機能します
フェニックス

このソリューションは、Bootstrap-TagsInput要素で機能します。貼り付けの問題に対処するには、次のようにイベントパラメータリストに「貼り付け」を追加するだけです:$( 'input')。on( 'keypress、paste' '、()=> ........
Jim22150

60

入力を英数字のみに制限し、それでも制御文字(バックスペース、削除、タブなど)およびコピー+貼り付けの使用を許可する回答を探していました。私が試した答えはどれもこれらの要件をすべて満たしていなかったため、inputイベントを使用して次のことを思いつきました。

$('input').on('input', function() {
  $(this).val($(this).val().replace(/[^a-z0-9]/gi, ''));
});

編集:rinogo
として入力テキストの途中で入力するときタイピングの端部に上記のコードスニペット力、コメントにカーソルを指摘しました。以下のコードスニペットがこの問題を解決すると思います。

$('input').on('input', function() {
  var c = this.selectionStart,
      r = /[^a-z0-9]/gi,
      v = $(this).val();
  if(r.test(v)) {
    $(this).val(v.replace(r, ''));
    c--;
  }
  this.setSelectionRange(c, c);
});

1
+1回答を下にスクロールして、このような回答を探していました。または、自分の回答を送信しました。この回答により、許可されていない文字がすぐに除外されます。すごい!
emilhem 2013年

2
+1は貼り付けられたテキストで機能し、FFのバックスペースや削除キーに干渉せず、event.whichまたはevent.keycode!に依存しません。+10できたらいいのに!
rinogo 2013

3
...しかしChromeとIEでは、新しい文字を入力するか、バックスペースを使用して入力テキストの途中でキーを削除すると、カーソルがテキストの最後に移動します...:/の簡単な回避策はありますかこの?私はこれがうまくいくようにとてもひどく欲しかった!
rinogo 2013

このコードはChrome Mobileで非常に奇妙な動作をします。カーソルは、入力した最初の文字とバックスペースでもジャンプします。
ジュリアーノ

2
@Juliano興味深いことに、カーソル/キャレットが現在配置されている場所に関係なく、selectionStartはChrome Mobileで常に0を返すようです。これがバグなのか、それとも意図された動作なのかは(まだ)わかりません。私は現在問題を調査しており、詳細がわかり次第、ここで私の回答またはコメントを更新します。
rexmac

48

短い答え:「keypress」イベントを防ぐ:

$("input").keypress(function(e){
    var charCode = !e.charCode ? e.which : e.charCode;

    if(/* Test for special character */ )
        e.preventDefault();
})

長い答え:jquery.alphanumのようなプラグインを使用する

ソリューションを選択する際に考慮すべき点がいくつかあります。

  • 貼り付けたテキスト
  • バックスペースやF5などの制御文字は、上記のコードによって阻止される場合があります。
  • é、í、äなど
  • アラビア語または中国語...
  • ブラウザ間の互換性

この領域は複雑で、サードパーティのプラグインを使用する必要があると思います。いくつかの利用可能なプラグインを試してみましたが、それぞれにいくつかの問題があるので、先に進んでjquery.alphanumを作成しました。コードは次のようになります。

$("input").alphanum();

または、よりきめ細かい制御を行うには、いくつかの設定を追加します。

$("#username").alphanum({
    allow      : "€$£",
    disallow   : "xyz",
    allowUpper : false
});

それが役に立てば幸い。


1
素晴らしいもの、素晴らしい。スラッシュ文字( '/')を有効/無効にするオプションを追加する必要がありましたallow。設定に入れている間は機能しませんでした。しかし、それがjqueryプラグインの美点であり、ニーズに合わせてそれらを変更できるという事実です。ありがとう!
エイドリアンマリニカ2013年

エイドリアンに感謝します。ところで、allowオプションを使用してスラッシュを有効にしてみましたが、このコードを使用して問題なく動作しました$('#firstName').alphanum({allow: "/"});。ドキュメントにバグや問題がある場合は、修正することをお勧めします。乾杯
KevSheedy 2013年

こんにちはKevSheedyさん、これをテストする時間を割いていただきありがとうございます。すみません、はっきりさせていません。問題は私も持っていたことだったallowOtherCharSets: falseallowCaseless: false。これらは、で設定された設定に干渉しましたallow。私の見解では、このallowオプションは他のすべてのオプション(allowOtherCharSetsまたはなどallowCaseless)を拒否する必要があると思います。したがって、allowオプションで文字を指定する場合、構成オブジェクトで設定されている他のオプションに関係なく、文字を許可する必要があります。同じことが当てはまりますdisallow。しかし、これは私の意見です。:)再び乾杯!:)
エイドリアン・マリニカ2013年

良い点はエイドリアン。私は先に行ってと作るV1.0.6で修正公開したallowdisallow高い優先度を持っているし。問題#7にログインしています。それがお役に立て
ば幸い

6
「それで私は先に進んでjquery.alphanumを書きました」素晴らしい!
Felix

14

HTML5のパターン入力属性を使用してください!

<input type="text" pattern="^[a-zA-Z0-9]+$" />

11
このソリューションは、不要な文字の送信を防ぎますが、不要な文字が入力フィールドに入力されるのを防ぎません
rexmac

1
また、ユーザーがHTML5ブラウザーを使用していないというリスクもあります。
ケンパチ船長2016

UXの経験から、多くの人がタイプできるものに制限されるよりも嫌いなことが1つあります。-入力の強制は、エラーメッセージと無効な通知を減らすことです。
Julix

1
@Julixケースバイケースです。数値しか入力できないフィールド(価格や通貨の金額など)があり、アルファベット文字の入力を聞いても意味がありません。しかし、そうです、私のものは実際にはOPの問題の解決策ではありませんでしたが、UXの問題を解決するための素晴らしく簡単な方法でした。
keepitreal 2017

13

あなたのテキストボックス:

<input type="text" id="name">

あなたのjavascript:

$("#name").keypress(function(event) {
    var character = String.fromCharCode(event.keyCode);
    return isValid(character);     
});

function isValid(str) {
    return !/[~`!@#$%\^&*()+=\-\[\]\\';,/{}|\\":<>\?]/g.test(str);
}

@Bhargav Rao、他の重複した投稿を削除して再投稿しました
chandler

11

正規表現を使用して、すべてを許可/禁止します。また、受け入れられた回答よりも少し堅牢なバージョンの場合、関連付けられたキー値を持たない文字(バックスペース、タブ、矢印キー、削除など)を許可するには、まずkeypressイベントを通過させ、値ではなくキーコードに基づいてキーを確認してください。

$('#input').bind('keydown', function (event) {
        switch (event.keyCode) {
            case 8:  // Backspace
            case 9:  // Tab
            case 13: // Enter
            case 37: // Left
            case 38: // Up
            case 39: // Right
            case 40: // Down
            break;
            default:
            var regex = new RegExp("^[a-zA-Z0-9.,/ $@()]+$");
            var key = event.key;
            if (!regex.test(key)) {
                event.preventDefault();
                return false;
            }
            break;
        }
});

11

jQuery英数字プラグインを見てください。https://github.com/KevinSheedy/jquery.alphanum

//All of these are from their demo page
//only numbers and alpha characters
$('.sample1').alphanumeric();
//only numeric
$('.sample4').numeric();
//only numeric and the .
$('.sample5').numeric({allow:"."});
//all alphanumeric except the . 1 and a
$('.sample6').alphanumeric({ichars:'.1a'});

手紙用のものはありますか?通常、私は番号のみにnanを使用します(郵便番号や電話など)

3

テキストボックスのonkeypressイベントにJavaScriptコードを記述します。要件に従って、テキストボックスの文字を許可および制限します

function isNumberKeyWithStar(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 42)
        return false;
    return true;
}
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}
function isNumberKeyForAmount(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 46)
        return false;
    return true;
}


1
これは、手動で入力した場合に機能します。ただし、コピーした特殊文字は貼り付けることができます。
Sunil Garg、2016年

3

私はこのコードを使用して、見た他のコードを変更しました。キーが押された、または貼り付けられたテキストがパターンテスト(一致)に合格した場合、ユーザーにのみ書き込み可能(この例は、8桁のみを許可するテキスト入力です)

$("input").on("keypress paste", function(e){
    var c = this.selectionStart, v = $(this).val();
    if (e.type == "keypress")
        var key = String.fromCharCode(!e.charCode ? e.which : e.charCode)
    else
        var key = e.originalEvent.clipboardData.getData('Text')
    var val = v.substr(0, c) + key + v.substr(c, v.length)
    if (!val.match(/\d{0,8}/) || val.match(/\d{0,8}/).toString() != val) {
        e.preventDefault()
        return false
    }
})

なぜ!e.charCode ? e.which : e.charCodeそして単にではないのですe.charCode ? e.charCode : e.whichか?
Massimiliano Kraus

10進数を受け入れるために必要な変更は何ですか?
ubm

2

これは、ユーザーが文字「a」を入力できないようにする例です

$(function() {
$('input:text').keydown(function(e) {
if(e.keyCode==65)
    return false;

});
});

ここでキーコードの参照:http :
//www.expandinghead.net/keycode.html


あなたが許可したくないすべてのキーコードは、試して管理するのに圧倒される可能性があると思います。
RSolberg、2009年

1から5までの数字しか入力できないように制限したい場合は、コード内で5つのキーコードを管理することになります。
RSolberg、2009年

2
AlphaNumericがあなたのためのプラグインでなければ、それは実際に悪い計画ではありません。switch / caseステートメントで動作させました。次の例では、ディレクトリ名に使用できない文字を許可しません:$( 'input [type =' text ']、textarea')。keydown(function(ev){switch(ev.keyCode){case 47:case 92:case 63:ケース37:ケース42:ケース59:ケース124:ケース34:ケース60:ケース62:falseを返す;};});
Mミラー、

@ user434917、Androidモバイルクロムブラウザーでテストすると、コードが機能しません。何か解決策はありますか?
Pranesh Janarthanan

2
$(function(){
      $('input').keyup(function(){
        var input_val = $(this).val();
        var inputRGEX = /^[a-zA-Z0-9]*$/;
        var inputResult = inputRGEX.test(input_val);
          if(!(inputResult))
          {     
            this.value = this.value.replace(/[^a-z0-9\s]/gi, '');
          }
       });
    });

1

はい、jQueryを次のように使用することで実行できます。

<script>
$(document).ready(function()
{
    $("#username").blur(function()
    {
        //remove all the class add the messagebox classes and start fading
        $("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
        //check the username exists or not from ajax
        $.post("user_availability.php",{ user_name:$(this).val() } ,function(data)
        {
          if(data=='empty') // if username is empty
          {
            $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
            { 
              //add message and change the class of the box and start fading
              $(this).html('Empty user id is not allowed').addClass('messageboxerror').fadeTo(900,1);
            });
          }
          else if(data=='invalid') // if special characters used in username
          {
            $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
            { 
              //add message and change the class of the box and start fading
              $(this).html('Sorry, only letters (a-z), numbers (0-9), and periods (.) are allowed.').addClass('messageboxerror').fadeTo(900,1);
            });
          }
          else if(data=='no') // if username not avaiable
          {
            $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
            { 
              //add message and change the class of the box and start fading
              $(this).html('User id already exists').addClass('messageboxerror').fadeTo(900,1);
            });     
          }
          else
          {
            $("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
            { 
              //add message and change the class of the box and start fading
              $(this).html('User id available to register').addClass('messageboxok').fadeTo(900,1); 
            });
          }

        });

    });
});
</script>
<input type="text" id="username" name="username"/><span id="msgbox" style="display:none"></span>

そして、user_availability.phpのスクリプトは次のようになります。

<?php
include'includes/config.php';

//value got from the get method
$user_name = trim($_POST['user_name']);

if($user_name == ''){
    echo "empty";
}elseif(preg_match('/[\'^£$%&*()}{@#~?><>,|=_+¬-]/', $user_name)){
    echo "invalid";
}else{
    $select = mysql_query("SELECT user_id FROM staff");

    $i=0;
    //this varible contains the array of existing users
    while($fetch = mysql_fetch_array($select)){
        $existing_users[$i] = $fetch['user_id'];
        $i++;
    }

    //checking weather user exists or not in $existing_users array
    if (in_array($user_name, $existing_users))
    {
        //user name is not availble
        echo "no";
    } 
    else
    {
        //user name is available
        echo "yes";
    }
}
?>

/\を追加しようとしましたが、成功しませんでした。


JavaScriptを使用してそれを行うこともできます。コードは次のようになります。

<!-- Check special characters in username start -->
<script language="javascript" type="text/javascript">
function check(e) {
    var keynum
    var keychar
    var numcheck
    // For Internet Explorer
    if (window.event) {
        keynum = e.keyCode;
    }
    // For Netscape/Firefox/Opera
    else if (e.which) {
        keynum = e.which;
    }
    keychar = String.fromCharCode(keynum);
    //List of special characters you want to restrict
    if (keychar == "'" || keychar == "`" || keychar =="!" || keychar =="@" || keychar =="#" || keychar =="$" || keychar =="%" || keychar =="^" || keychar =="&" || keychar =="*" || keychar =="(" || keychar ==")" || keychar =="-" || keychar =="_" || keychar =="+" || keychar =="=" || keychar =="/" || keychar =="~" || keychar =="<" || keychar ==">" || keychar =="," || keychar ==";" || keychar ==":" || keychar =="|" || keychar =="?" || keychar =="{" || keychar =="}" || keychar =="[" || keychar =="]" || keychar =="¬" || keychar =="£" || keychar =='"' || keychar =="\\") {
        return false;
    } else {
        return true;
    }
}
</script>
<!-- Check special characters in username end -->

<!-- in your form -->
    User id : <input type="text" id="txtname" name="txtname" onkeypress="return check(event)"/>

2
おい、あなたはおそらく役に立たない余分なコードをたくさんまとめました。あなたはそれを最小限に減らすことができますか?そして彼はjQueryについて尋ねていました、PHPが関連しているかどうかはわかりません。
Simon East

@PHP Ferrari:私はJavaScriptコードを使用していますが、コードは正常に機能しています。顧客が特殊文字を入力した場合にアラートポップアップメッセージを表示するにはどうすればよいですか。「許可されていない特殊文字」のようなメッセージ。
宝石

1

数字だけ:

$( 'input.time')。keydown(function(e){if(e.keyCode> = 48 && e.keyCode <= 57){return true;} else {return false;}});

または「:」を含む時間

$( 'input.time')。keydown(function(e){if(e.keyCode> = 48 && e.keyCode <= 58){return true;} else {return false;}});

削除とバックスペースも含む:

$( 'input.time')。keydown(function(e){if((e.keyCode> = 46 && e.keyCode <= 58)|| e.keyCode == 8){return true;} else {return false;}});

残念ながらiMACで動作しない


1

デールの答えに対するアレックスのコメントにコメントしたかった。不可能(最初にどれだけの「担当者」が必要ですか?それはすぐには起こりません。奇妙なシステムです。)だから答えとして:

このように正規表現の定義に\ bを追加することで、バックスペースを追加できます:[a-zA-Z0-9 \ b]。または、「エキゾチックでない」文字(バックスペースなどの制御文字も含む)を含むラテン語の範囲全体を許可するだけです。^ [\ u0000- \ u024F \ u20AC] + $

ユーロ記号(20ac)があるラテン語以外の実際のUnicode文字のみ、必要に応じて追加してください。

コピー&ペーストを介して入力された入力も処理するには、「変更」イベントにバインドし、そこで入力を確認します-入力を削除または削除する/「サポートされていない文字」などのエラーメッセージを表示します。

if (!regex.test($j(this).val())) {
  alert('your input contained not supported characters');
  $j(this).val('');
  return false;
}

1

キーを押すときに特殊文字を制限します。キーコードのテストページは次のとおりです。http//www.asquare.net/javascript/tests/KeyCode.html

var specialChars = [62,33,36,64,35,37,94,38,42,40,41];

some_element.bind("keypress", function(event) {
// prevent if in array
   if($.inArray(event.which,specialChars) != -1) {
       event.preventDefault();
   }
});

Angularでは、テキストフィールドに適切な通貨フォーマットが必要でした。私の解決策:

var angularApp = angular.module('Application', []);

...

// new angular directive
angularApp.directive('onlyNum', function() {
    return function( scope, element, attrs) {

        var specialChars = [62,33,36,64,35,37,94,38,42,40,41];

        // prevent these special characters
        element.bind("keypress", function(event) {
            if($.inArray(event.which,specialChars) != -1) {
                prevent( scope, event, attrs)
             }
        });

        var allowableKeys = [8,9,37,39,46,48,49,50,51,52,53,54,55,56
            ,57,96,97,98,99,100,101,102,103,104,105,110,190];

        element.bind("keydown", function(event) {
            if($.inArray(event.which,allowableKeys) == -1) {
                prevent( scope, event, attrs)
            }
        });
    };
})

// scope.$apply makes angular aware of your changes
function prevent( scope, event, attrs) {
    scope.$apply(function(){
        scope.$eval(attrs.onlyNum);
        event.preventDefault();
    });
    event.preventDefault();
}

HTMLにディレクティブを追加します

<input only-num type="text" maxlength="10" id="amount" placeholder="$XXXX.XX"
   autocomplete="off" ng-model="vm.amount" ng-change="vm.updateRequest()">

そして、対応する角度コントローラーでは、1つのピリオドのみを許可し、テキストを数値に変換し、「ぼかし」に数値の丸めを追加します

...

this.updateRequest = function() {
    amount = $scope.amount;
    if (amount != undefined) {
        document.getElementById('spcf').onkeypress = function (e) {
        // only allow one period in currency
        if (e.keyCode === 46 && this.value.split('.').length === 2) {
            return false;
        }
    }
    // Remove "." When Last Character and round the number on blur
    $("#amount").on("blur", function() {
      if (this.value.charAt(this.value.length-1) == ".") {
          this.value.replace(".","");
          $("#amount").val(this.value);
      }
      var num = parseFloat(this.value);
      // check for 'NaN' if its safe continue
      if (!isNaN(num)) {
        var num = (Math.round(parseFloat(this.value) * 100) / 100).toFixed(2);
        $("#amount").val(num);
      }
    });
    this.data.amountRequested = Math.round(parseFloat(amount) * 100) / 100;
}

...

1

特殊文字を置き換え、スペースを入れて小文字に変換するには

$(document).ready(function (){
  $(document).on("keyup", "#Id", function () {
  $("#Id").val($("#Id").val().replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '').toLowerCase());
 }); 
});

0
[User below code to restrict special character also    

$(h.txtAmount).keydown(function (event) {
        if (event.shiftKey) {
            event.preventDefault();
        }
        if (event.keyCode == 46 || event.keyCode == 8) {
        }
        else {
            if (event.keyCode < 95) {
                if (event.keyCode < 48 || event.keyCode > 57) {
                    event.preventDefault();
                }
            }
            else {
                if (event.keyCode < 96 || event.keyCode > 105) {
                    event.preventDefault();
                }
            }
        }


    });]

4
コードのみの回答は、説明がなければあまり役に立ちません。
Vemonus 2017年

0

TextBoxで数字のみを許可(アルファベットと特殊文字の制限)

        /*code: 48-57 Numbers
          8  - Backspace,
          35 - home key, 36 - End key
          37-40: Arrow keys, 46 - Delete key*/
        function restrictAlphabets(e){
            var x=e.which||e.keycode;
            if((x>=48 && x<=57) || x==8 ||
                (x>=35 && x<=40)|| x==46)
                return true;
            else
                return false;
        }

0
/**
     * Forbids special characters and decimals
     * Allows numbers only
     * */
    const numbersOnly = (evt) => {

        let charCode = (evt.which) ? evt.which : evt.keyCode;
        if (charCode === 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }

        let inputResult = /^[0-9]*$/.test(evt.target.value);
        if (!inputResult) {
            evt.target.value = evt.target.value.replace(/[^a-z0-9\s]/gi, '');
        }

        return true;
    }
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.