복붙노트

[JQUERY] 내가 어떻게 차단하거나 jQuery로 입력 필드에서 특수 문자를 제한 할 수 있습니까?

JQUERY

내가 어떻게 차단하거나 jQuery로 입력 필드에서 특수 문자를 제한 할 수 있습니까?

해결법

  1. 1.당신이 할 수 있도록 변경할 수있는 정규 표현식 / 당신이 무엇을 같이 사용 해제를 사용하여 간단한 예.

    당신이 할 수 있도록 변경할 수있는 정규 표현식 / 당신이 무엇을 같이 사용 해제를 사용하여 간단한 예.

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

  2. 2.나는 영숫자 문자 입력을 제한하지만, 여전히 제어 문자 (예를 들어, 백 스페이스, 삭제, 탭)의 사용을 허용하고 붙여 넣기 + 복사하는 것이 해답을 찾고 있었다. 나는이 모든 요구 사항을 만족 시도하는 제공된 답변 없음, 그래서 입력 이벤트를 사용하여 다음과 같은 내놓았다 없습니다.

    나는 영숫자 문자 입력을 제한하지만, 여전히 제어 문자 (예를 들어, 백 스페이스, 삭제, 탭)의 사용을 허용하고 붙여 넣기 + 복사하는 것이 해답을 찾고 있었다. 나는이 모든 요구 사항을 만족 시도하는 제공된 답변 없음, 그래서 입력 이벤트를 사용하여 다음과 같은 내놓았다 없습니다.

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

  3. 3.짧은 답변 : '키를 누를 때'이벤트를 방지 :

    짧은 답변 : '키를 누를 때'이벤트를 방지 :

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

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

    긴 대답 : jquery.alphanum처럼 사용 플러그인

    솔루션을 따기 때 고려해야 할 몇 가지가 있습니다 :

    나는이 지역은 제 3 자 플러그인을 사용하여 영장 복잡한 충분하다 생각합니다. 나는 가능한 플러그인의 여러 가지를 시도했지만 내가 나서서 jquery.alphanum을 쓴, 그래서 그들 각각의 몇 가지 문제점을 발견. 코드는 다음과 같습니다 :

    $("input").alphanum();

    또는 더 세분화 된 제어를 위해, 몇 가지 설정을 추가 :

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

    희망이 도움이.

  4. 4.을 사용 HTML5의 패턴 입력 속성!

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

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

  5. 5.사용 / 사용 해제하면 아무 것도 할 수 있도록 정규식. 또한, 허용 대답보다 약간 더 강력한 버전, 문자를 허용하는 것은 그 (백 스페이스, 탭, 삭제 등을 화살표 키)와 관련된 키 값을하지 않아도하는 것은 키 누르기 이벤트를 통해 처음으로 통과하여 수행 할 수 있으며, 키 코드 대신 값을 기준으로 키를 확인.

    사용 / 사용 해제하면 아무 것도 할 수 있도록 정규식. 또한, 허용 대답보다 약간 더 강력한 버전, 문자를 허용하는 것은 그 (백 스페이스, 탭, 삭제 등을 화살표 키)와 관련된 키 값을하지 않아도하는 것은 키 누르기 이벤트를 통해 처음으로 통과하여 수행 할 수 있으며, 키 코드 대신 값을 기준으로 키를 확인.

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

  6. 6.당신의 텍스트 상자 :

    당신의 텍스트 상자 :

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

  7. 7.JQuery와 숫자 플러그인을 살펴보십시오. https://github.com/KevinSheedy/jquery.alphanum

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

  8. 8.내가 톱이 다른 수정이 코드를 사용합니다. 키가 눌려 붙여 텍스트 패턴 검사 (경기)을 통과하면 사용자 만 기입 대상 (이 예에서는 8 자리 수 있도록하는 문자 입력이다)

    내가 톱이 다른 수정이 코드를 사용합니다. 키가 눌려 붙여 텍스트 패턴 검사 (경기)을 통과하면 사용자 만 기입 대상 (이 예에서는 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
    }
})

  9. 9.텍스트 상자의 때 onKeyPress 이벤트에 대한 몇 가지 자바 스크립트 코드를 작성합니다. 요구 사항에 따라 허용하고 텍스트 상자에 문자를 제한

    텍스트 상자의 때 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;
}

  10. 10.이것은 "A"는 문자 입력에서 사용자를 방지하는 예이다

    이것은 "A"는 문자 입력에서 사용자를 방지하는 예이다

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

});
});

    키 코드는 여기에 refrence : http://www.expandinghead.net/keycode.html

  11. 11.

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

  12. 12.예는 다음과 같이 jQuery를 사용하여 수행 할 수 있습니다

    예는 다음과 같이 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>

    및 사용자 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)"/>

  13. 13.그냥 번호 :

    그냥 번호 :

    또는 시간을 포함 ""

    또한 삭제 및 백 스페이스를 포함 :

    불행히도 아이맥에 대한 작업에 점점하지

  14. 14.데일의 대답에 알렉스의 의견에 대한 언급을 구함. 가능하지 않음 (많은 "담당자는"? 그건 .. 곧 이상한 시스템을 발생 실 거예요 방법을 먼저해야합니다.) 답변 수 있도록 :

    데일의 대답에 알렉스의 의견에 대한 언급을 구함. 가능하지 않음 (많은 "담당자는"? 그건 .. 곧 이상한 시스템을 발생 실 거예요 방법을 먼저해야합니다.) 답변 수 있도록 :

    [A-ZA-Z0-9 \ B] : 백 스페이스 이런 정규식 정의 \ B를 추가로 첨가 할 수있다. ^ [\ u0000- \ u024F \ u20AC] + $ : 또는 당신은 단순히 더 많거나 적은 것도 "비 이국적인"문자 (또는 백 스페이스와 같은 문자를 제어)을 포함한 전체 라틴어 범위를 허용

    만 실제 유니 코드 문자 외부 라틴어 당신이 다른해야 할 수도 있습니다 어떤 유로 기호 (20AC), 추가가있다.

    또한 핸들 입력 복사를 통해 입력하는 방법 및 간단 또한 바인딩은 "변경"이벤트에 붙여 너무 거기에 입력을 확인 -를 삭제하거나 스트라이핑 / "지원되지 않는 문자"와 같은 오류 메시지를주고 ..

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

  15. 15.키를 누를 때 특수 문자를 제한합니다. 여기에 키 코드에 대한 테스트 페이지의 : http://www.asquare.net/javascript/tests/KeyCode.html

    키를 누를 때 특수 문자를 제한합니다. 여기에 키 코드에 대한 테스트 페이지의 : 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();
   }
});

    각도, 나는 내 텍스트 필드에 적절한 통화 형식을 필요로했다. 내 솔루션 :

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

...

  16. 16.소문자 특수 문자, 공간과 변환을 교체하려면

    소문자 특수 문자, 공간과 변환을 교체하려면

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

  17. 17.

    [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();
                }
            }
        }


    });]

  18. 18.텍스트 상자에 숫자 만 허용 (알파벳과 특수 문자 제한)

    텍스트 상자에 숫자 만 허용 (알파벳과 특수 문자 제한)

            /*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;
        }

  19. 19.

    /**
     * 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;
    }

    20. from https://stackoverflow.com/questions/895659/how-do-i-block-or-restrict-special-characters-from-input-fields-with-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 이미지 다운로드에 힘 브라우저 클릭에 파일을  (0) 2020.10.08
[JQUERY] 나는 JQuery와 클릭 () 나는 바인딩과에 이벤트 처리기를 바인딩 이미 클릭하지 않은 경우 <A> 링크를 따라하기를 호출 할 수 있습니까?  (0) 2020.10.08
[JQUERY] iframe이 만 페이지의 특정 부분을 표시합니다  (0) 2020.10.08
[JQUERY] asp.net MVC에서 컨트롤러에 대한 간단한 Ajax 호출 만들기  (0) 2020.10.08
[JQUERY] 언제 jQuery의 document.ready 기능을 사용해야합니까?  (0) 2020.10.08
,

티스토리툴바