كيف يمكنني حظر أو تقييد الأحرف الخاصة من حقول الإدخال باستخدام jquery؟

StackOverflow https://stackoverflow.com/questions/895659

سؤال

كيف يمكنني حظر الأحرف الخاصة من كتابةها في حقل الإدخال باستخدام مسج؟

لا يوجد حل صحيح

نصائح أخرى

مثال بسيط باستخدام تعبير منتظم يمكنك تغييره للسماح / عدم السماح بأي شيء تريده.

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

كنت أبحث عن إجابة مقيدة المدخلات إلى الأحرف الأبجدية الرقمية فقط، ولكن لا يزال مسموحا باستخدام أحرف التحكم (على سبيل المثال، Backspace، حذف، علامة تبويب) ونسخ + لصق. أيا من الإجابات المقدمة التي حاولت راضي عن كل هذه المتطلبات، لذلك توصلت إلى ما يلي باستخدام 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);
});

اجابة قصيرة: منع حدث "KeyPress":

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

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

اجابة طويلة: استخدام البرنامج المساعد مثل jQuery.alphanum.

هناك العديد من الأشياء التي يجب مراعاتها عند اختيار الحل:

  • نص لصق
  • يمكن منع أحرف التحكم مثل Backspace أو F5 بواسطة الرمز أعلاه.
  • é، يا، إلخ
  • العربية أو الصينية ...
  • عبر متصفح التوافق

أعتقد أن هذه المنطقة معقدة بدرجة كافية للاستثمار باستخدام البرنامج المساعد في الطرف الثالث. جربت العديد من الإضافات المتاحة ولكن وجدت بعض المشاكل مع كل منهم، لذلك ذهبت إلى الأمام وكتب jQuery.alphanum.. وبعد يشبه الرمز هذا:

$("input").alphanum();

أو لمزيد من التحكم في الحبيبات الدقيقة، أضف بعض الإعدادات:

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

آمل أن يساعد.

استخدم سمة إدخال نمط HTML5!

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

ألق نظرة على البرنامج المساعد الأبجدية الرقمية 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'});

استخدم Regex للسماح / عدم السماح بأي شيء. أيضا، للحصول على إصدار أكثر قوة أكثر قليلا من الإجابة المقبولة، يسمح بالأحرف التي لا تحتوي على قيمة أساسية مرتبطة بها (بخلاف الفضاء، علامة التبويب، مفاتيح الأسهم، حذف، إلخ) عن طريق المرور أولا من خلال حدث KeyPress و تحقق من المفتاح بناء على KeyCode بدلا من القيمة.

$('#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">

جافا سكريبت الخاص بك:

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

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

اكتب بعض رمز JavaScript على حدث OnkeyPress من TextBox. حسب الشرط، يمكنك تقييد الشخصية في مربع النص

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

يمكنني استخدام هذا الرمز تعديل الآخرين الذي رأيته. الكتابة الكبرى فقط للمستخدم اكتب إذا كان النص المضغوط أو لصق المفتاح تمرير اختبار النمط (المباراة) (هذا المثال هو إدخال نص يسمح فقط ب 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
    }
})

هذا مثال يمنع المستخدم من كتابة الحرف "A"

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

});
});

الرموز الرئيسية فاصل هنا:
http://www.expandinghead.net/keycode.html.

نعم يمكنك القيام به باستخدام JQuery AS:

<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 & Code سيكون:

<!-- 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)"/>

فقط الأرقام:

$ ('input.time' الوقت). Keydown (وظيفة (E) {if (e.Keycode> = 48 && e.Keycode <= 57) {ارجع true؛} آخر} {return false؛}})؛

أو للوقت بما في ذلك ":"

$ ("Input.Time"). Keydown (وظيفة (E) {if (e.KeyCode> = 48 && e.Keycode <= 58) {ارجع true؛} آخر {return false؛}})؛

أيضا بما في ذلك حذف والخلف:

$ ("الإدخال"). Keydown (وظيفة (E) {if (e.Keycode> = 46 && e.Keycode <= 58) || e.Keycode == 8) {ارجع true؛} {return خاطئة؛ } })؛

لسوء الحظ لا تحصل عليه للعمل على إيماك

أراد التعليق على تعليق أليكس على إجابة ديل. غير ممكن (تحتاج أولا إلى مقدار "مندوب"؟ لن يحدث ذلك قريبا جدا .. النظام الغريب.) حتى إجابة:

يمكن إضافة Backspace عن طريق إضافة B إلى تعريف Regex مثل هذا: [A-ZA-Z0-9 B]. أو يمكنك ببساطة السماح للنطاق اللاتيني بأكمله، بما في ذلك أي شيء آخر أو أقل من أي شيء "غير غريب" (أيضا التحكم في السحر مثل Backspace): ^ [ u0000- u024f u20ac] + $

فقط unicode unicode char خارج اللاتينية هناك علامة اليورو (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();
   }
});

في الزاوي، كنت بحاجة إلى تنسيق عملة مناسبة في TextField. بلدي الحل:

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()">

وفي وحدة التحكم الزجاجية المقابلة، أتيح فقط أن تكون هناك فترة واحدة فقط وتحويل النص إلى الرقم وإضافة رقم تقريب على "Blur"

...

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

...

لاستبدال الأحرف الخاصة والمساحة وتحويلها إلى الحالة الصغيرة

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


    });]
$(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, '');
          }
       });
    });
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top