jquery로 입력 필드에서 특수 문자를 차단하거나 제한하는 방법은 무엇입니까?


답변:


133

원하는 것을 허용 / 금지하도록 변경할 수있는 정규식을 사용하는 간단한 예입니다.

$('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
파이어 폭스에서이 허용하지 않습니다 백 스페이스
알렉스

avión (비행기),
árbol

그것은 최신 파이어 폭스 브라 우어에서 작동하지만, 작업을 잘 크롬하지 않습니다
피닉스

이 솔루션은 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

3
...하지만 Chrome 및 IE에서 새 문자를 입력하거나 백 스페이스를 사용 하고 입력 텍스트 중간에 삭제 하면 커서가 텍스트 끝으로 이동합니다 ... : /에 대한 쉬운 해결 방법이 있습니까? 이? 나는 이것이 작동하기를 너무나도 원했다!
rinogo

이 코드는 Chrome Mobile에서 매우 이상하게 작동합니다. 커서는 입력 한 첫 글자와 백 스페이스에서도 이동합니다.
Juliano

2
@Juliano 흥미롭게도, 현재 커서 / 캐럿의 위치에 관계없이 selectionStart는 Chrome 모바일에서 항상 0을 반환하는 것 같습니다. 이것이 버그인지 의도 된 동작인지 확실하지 않습니다. 현재 문제를 조사하고 있으며 자세한 내용을 확인하면 여기에서 답변이나 의견을 업데이트 할 것입니다.
rexmac

48

짧은 대답 : '키 누르기'이벤트 방지 :

$("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 플러그인의 장점이며, 필요에 맞게 수정할 수 있다는 사실입니다. 감사!
Adrian Marinica 2013 년

고마워 Adrian. Btw, 방금 allow옵션을 사용하여 슬래시를 활성화하려고 시도했으며이 코드를 사용하여 잘 작동했습니다. $('#firstName').alphanum({allow: "/"});더 많은 정보를 제공 할 수 있습니까? 버그가 있거나 문서에 문제가 있으면 수정하는 것이 좋습니다. 건배
KevSheedy

안녕하세요 KevSheedy, 시간을내어 테스트 해 주셔서 감사합니다. 명확하게하지 못해서 죄송합니다. 문제는 나도 allowOtherCharSets: false있고 allowCaseless: false. 이것들은에 설정된 설정을 방해했습니다 allow. 내 관점 allow에서이 옵션은 다른 모든 옵션 (예 : allowOtherCharSets또는 allowCaseless)을 거부해야 한다고 생각합니다 . 따라서 allow옵션에 문자를 지정 하면 구성 개체에 설정된 다른 옵션과 관계없이 허용되어야합니다. 동일은 간다 disallow. 그러나 이것은 단지 내 의견입니다. :) 다시 건배! :)
Adrian Marinica 2013 년

좋은 지적 Adrian. 나는 앞서 갔고하게 V1.0.6에서 수정 발표 한 allowdisallow더 높은 우선 순위를 가지고 있습니다. 문제 # 7에 기록되어 있습니다. 희망은 도움이
KevSheedy

6
"그래서 저는 jquery.alphanum을 썼습니다."
Felix

14

HTML5의 패턴 입력 속성을 사용하세요!

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

11
이 솔루션은 원하지 않는 문자가 제출되는 것을 방지하지만 원하지 않는 문자 가 입력 필드에 입력되는 것을 방지 하지는 않습니다 .
rexmac

1
사용자가 HTML5 브라우저를 사용하지 않을 위험도 있습니다.
Captain Kenpachi

UX 경험에서 많은 사람들이 타이핑 할 수있는 것에 제한을받는 것보다 더 싫어하는 것은 나중에 잘못했다는 말입니다. -입력 강제는 오류 메시지 및 잘못된 알림을 줄이기위한 것입니다.
Julix

1
@Julix 사례별로 그것입니다. 숫자 (가격 또는 통화 금액 등) 만 될 수있는 일부 필드는 알파벳 문자 입력을 듣는 것이 의미가 없습니다. 하지만 내 것은 실제로 OP 문제에 대한 해결책이 아니라 UX 문제를 도울 수있는 좋고 쉬운 방법이었습니다.
keepitreal

13

텍스트 상자 :

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

귀하의 자바 스크립트 :

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

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

@Bhargav 라오, 그 지적에 대해, 덕분에 다른 중복 게시물을 삭제하고이 하나 더 적절한했기 때문에이 일을 다시 게시
챈들러

11

정규식을 사용하여 모든 것을 허용 / 금지하십시오. 또한 승인 된 답변보다 약간 더 강력한 버전의 경우 키 값이 연결되지 않은 문자 (백 스페이스, 탭, 화살표 키, 삭제 등)를 먼저 키 누르기 이벤트를 통해 전달하여 허용 할 수 있습니다. 값 대신 키 코드를 기반으로 키를 확인하십시오.

$('#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'});

편지 용이 있나요? 일반적으로 난 그냥 단지 (우편 번호 또는 전화 등) 숫자 유모를 사용

3

텍스트 상자의 onkeypress 이벤트에 일부 자바 스크립트 코드를 작성하십시오. 요구 사항에 따라 텍스트 상자의 문자 허용 및 제한

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

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

소수 수용을 위해 어떤 변화가 필요합니까?
ubm

2

이것은 사용자가 "a"문자를 입력하지 못하도록하는 예입니다.

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

});
});

여기에서 키 코드 참조 :
http://www.expandinghead.net/keycode.html


허용하지 않으려는 모든 키 코드는 시도하고 관리하는 데 부담이 될 수 있다고 생각합니다.
RSolberg

누군가가 1에서 5까지의 숫자 만 입력 할 수 있도록 제한하려면 코드 내에서 5 개의 키 코드를 관리하게됩니다.
RSolberg

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 : return false;};});
M Miller

@ 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";
    }
}
?>

/\ 를 추가하려고 했지만 성공하지 못했습니다.


자바 스크립트를 사용하여 할 수도 있으며 코드는 다음과 같습니다.

<!-- 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 : 저는 자바 스크립트 코드를 사용하고 있습니다. 귀하의 코드는 잘 작동합니다. 고객이 특수 문자를 입력하면 경고 팝업 메시지를 어떻게 표시 할 수 있습니까? "특수 문자 허용 안 됨"과 같은 메시지.
Gem

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 거짓;}});

불행히도 iMAC에서 작동하지 않습니다.


1

Dale의 답변에 대한 Alex의 의견에 대해 언급하고 싶었습니다. 불가능합니다 (먼저 얼마나 많은 "rep"이 필요합니까? 그것은 곧 일어나지 않을 것입니다 .. 이상한 시스템.) 그래서 대답으로 :

백 스페이스는 다음과 같이 정규식 정의에 \ b를 추가하여 추가 할 수 있습니다. [a-zA-Z0-9 \ b]. 또는 "이국적이지 않은"문자 (백 스페이스와 같은 제어 문자도 포함)를 포함하여 전체 라틴어 범위를 허용합니다. ^ [\ u0000- \ u024F \ u20AC] + $

라틴어 이외의 실제 유니 코드 문자 만 유로 기호 (20ac)가 있습니다. 필요한 것은 무엇이든 추가하십시오.

복사 & 붙여 넣기를 통해 입력 된 입력을 처리하려면 "변경"이벤트에 바인딩하고 입력도 확인하십시오. 삭제하거나 스트라이프 / "지원되지 않는 문자"와 같은 오류 메시지를 표시합니다.

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

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.