jquery를 사용하여 입력 필드의 특수 문자를 차단하거나 제한하려면 어떻게 해야 합니까?
jquery를 사용하여 입력 필드에 특수 문자가 입력되지 않도록 차단하려면 어떻게 해야 합니까?
원하는 대로 허용/허용하지 않도록 변경할 수 있는 정규식을 사용하는 간단한 예입니다.
$('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;
}
});
입력을 영숫자로만 제한하고 제어 문자(예: 백스페이스, 삭제, 탭) 및 copy+paste를 사용할 수 있는 답변을 찾고 있었습니다.도 이 사항을 시키지 못했기 에, 는 가제시어이모만사요못족지때다에문했니저, 도▁the▁▁none다▁that▁the▁up니▁with▁came▁answers를 사용하여 다음과 같은 답을 생각해냈습니다.input이벤트
$('input').on('input', function() {
$(this).val($(this).val().replace(/[^a-z0-9]/gi, ''));
});
댓글에서 지적한 것처럼, 입력 텍스트 중간에 입력할 때 위의 코드 스니펫은 커서를 입력의 끝으로 강제합니다.저는 아래 코드 스니펫이 이 문제를 해결했다고 생각합니다.
$('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);
});
간단한 답변: '키프레스' 이벤트를 방지합니다.
$("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
});
도움이 되길 바랍니다.
인라인에서 단순 키 누르기 이벤트를 사용합니다.
<input type="text" name="count" onkeypress="return /[0-9a-zA-Z]/i.test(event.key)">HTML5의 패턴 입력 속성 사용!
<input type="text" pattern="^[a-zA-Z0-9]+$" />
regex를 사용하여 모든 항목을 허용/거부합니다.또한 허용된 답변보다 약간 더 강력한 버전의 경우 키 값이 연결되지 않은 문자(백스페이스, 탭, 화살표 키, 삭제 등)를 먼저 키 누르기 이벤트를 통과하고 값 대신 키 코드를 기반으로 키를 확인하여 허용할 수 있습니다.
$('#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;
}
});
텍스트 상자:
<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);
}
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'});
이것은 사용자가 문자 "a"를 입력하지 못하게 하는 예입니다.
$(function() {
$('input:text').keydown(function(e) {
if(e.keyCode==65)
return false;
});
});
서 키는 다음과 같습니다.
http://www..net/keycode.htmlhttp ://www.expandinghead.net/keycode.html
저는 이 코드를 제가 본 다른 코드를 수정하는 데 사용합니다.키를 누르거나 붙여넣은 텍스트가 패턴 테스트(일치)를 통과한 경우에만 사용자가 쓸 수 있습니다(이 예는 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
}
})
$(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, '');
}
});
});
텍스트 상자에서 문자를 허용하고 제한하는 요구 사항에 따라 텍스트 상자의 키프레스 이벤트에 자바스크립트 코드를 작성합니다.
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;
}
특수 문자, 공백을 대체하고 소문자로 변환하려면
$(document).ready(function (){
$(document).on("keyup", "#Id", function () {
$("#Id").val($("#Id").val().replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '').toLowerCase());
});
});
이 작업에 jQuery가 필요하지 않습니다.
자바스크립트를 할 수 , 에 넣을 수. 당신은 이것을 에 넣을 수 있습니다.onKeyUp이벤트
제한 - 특수 문자
e.target.value = e.target.value.replace(/[^\w]|_/g, '').toLowerCase()
수락 - 번호만 해당
e.target.value = e.target.value.replace(/[^0-9]/g, '').toLowerCase()
수락 - 작은 알파벳만
e.target.value = e.target.value.replace(/[^0-9]/g, '').toLowerCase()
몇 가지 시나리오를 더 쓸 수는 있지만 구체적인 답변은 유지해야 합니다.
참고 jquery, react, angular 등과 함께 작동합니다.
예. 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>
및 사용자_가용성 스크립트를 생성합니다.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)"/>
숫자만:
$('입력').시간').keydown(function(e) {if(e.keyCode>=48 &&e.keyCode<=57) {returntrue; } 기타 {returnfalse; }});
또는 ":"를 포함한 시간 동안
$('입력').시간').keydown(function(e) {if(e.keyCode>=48 &&e.keyCode<=58) {returntrue; } 기타 {returnfalse; }});
삭제 및 백스페이스도 포함합니다.
$('입력').시간').keydown(function(e) {if((e.keyCode>=46 &&e.keyCode<=58) || e.keyCode==8) {returntrue; } 기타 {returnfalse; });
안타깝게도 iMAC에서 작동하지 않습니다.
데일의 답변에 대한 알렉스의 언급에 대해 언급하고 싶습니다.가능하지 않습니다(먼저 "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;
}
키 누르기에서 특수 문자를 제한합니다.다음은 키 코드 테스트 페이지입니다. 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;
}
...
$(this).val($(this).val().replace(/[^0-9\.]/g,''));
if( $(this).val().indexOf('.') == 0){
$(this).val("");
}
//이것이 가장 간단한 방법입니다.
인덱스는 입력이 "."로 시작했는지 확인하는 데 사용됩니다.
[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();
}
}
}
});]
텍스트 상자에 숫자만 허용(알파벳 및 특수 문자 제한)
/*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;
}
/**
* 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;
}
HTML에서:
<input type="text" (keypress)="omitSpecialChar($event)"/>
JS에서:
omitSpecialChar(event) {
const keyPressed = String.fromCharCode(event.keyCode);
const verifyKeyPressed = /^[a-zA-Z\' \u00C0-\u00FF]*$/.test(keyPressed);
return verifyKeyPressed === true;
}
이 예에서는 액센트를 입력할 수 있습니다.
$(document).ready(function() {
$('#Description').bind('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);
if (!(checkEmpty($("#Description").val()))) {
$("#Description").val("");
} //1Apr2022 code end
});
$('#Description').on('change', function() {
if (!(checkEmpty($("#Description").val()))) {
$("#Description").val("");
} //1Apr2022 code end
});
});
function checkEmpty(field) { //1Apr2022 new code
if (field == "" ||
field == null ||
field == "undefinied") {
return false;
} else if (/^\s*$/.test(field)) {
return false;
} else {
return true;
}
}
더 향상된 형태는
$('input[type=text]').on('input', function() {
var c = this.selectionStart,
r = /[^a-z ]/gi,
v = $(this).val();
if(r.test(v)) {
$(this).val(v.replace(r, ''));
c--;
}
this.setSelectionRange(c, c);
});공백을 입력할 수도 있고 입력 필드를 텍스트 유형으로만 지정할 수 있으며 일반적으로 이메일, 비밀번호 등 다른 입력 필드에 영향을 주지 않기 때문에 이메일 및 비밀번호 필드에 특수 문자가 필요합니다.
이 JavaScript 코드를 사용해 보십시오. 입력에서 특수 문자를 제한하는 간단한 방법입니다.
소스 코드:특수 문자 제한
$('input').bind('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);
});
언급URL : https://stackoverflow.com/questions/895659/how-do-i-block-or-restrict-special-characters-from-input-fields-with-jquery
'programing' 카테고리의 다른 글
| SELECT DISTINCT ON 쿼리를 Postgresql에서 MySQL로 변환하는 중 (0) | 2023.08.11 |
|---|---|
| 어떻게 하면 제 프로젝트를 깃허브에서 끌어낼 수 있을까요? (0) | 2023.08.11 |
| 관찰 가능한 RXJS 배열에 대한 단순 필터 (0) | 2023.08.11 |
| 십진수 열에 돈을 저장하는 것 - 어떤 정밀도와 규모입니까? (0) | 2023.08.11 |
| 선형 레이아웃 하위 항목 사이에 공백을 만드는 방법은 무엇입니까? (0) | 2023.08.11 |