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;
}
});
আমি এমন একটি উত্তর খুঁজছিলাম যা কেবলমাত্র আলফানিউমেরিক অক্ষরগুলিতেই ইনপুটকে সীমাবদ্ধ রাখে তবে তবুও নিয়ন্ত্রণের অক্ষর (যেমন, ব্যাকস্পেস, মুছুন, ট্যাব) এবং অনুলিপি + পেস্ট ব্যবহারের অনুমতি দেওয়া হয়। প্রদত্ত জবাবগুলির মধ্যে যেগুলির মধ্যে আমি এই সমস্ত প্রয়োজনীয়তা সন্তুষ্ট করার চেষ্টা করেছি, তাই আমি 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);
});
event.which
বা event.keycode
! যদি আমি +10 করতে পারি!
সংক্ষিপ্ত উত্তর: 'কীপ্রেস' ইভেন্টটি প্রতিরোধ করুন:
$("input").keypress(function(e){
var charCode = !e.charCode ? e.which : e.charCode;
if(/* Test for special character */ )
e.preventDefault();
})
দীর্ঘ উত্তর: jquery.lphanum এর মতো একটি প্লাগইন ব্যবহার করুন
সমাধান বাছাই করার সময় কয়েকটি বিষয় বিবেচনা করতে হবে:
আমি মনে করি এই অঞ্চলটি তৃতীয় পক্ষের প্লাগইন ব্যবহার করে ওয়ারেন্ট দেওয়ার পক্ষে যথেষ্ট জটিল। আমি উপলভ্য বেশ কয়েকটি প্লাগইন চেষ্টা করেছি কিন্তু সেগুলির প্রত্যেকটির সাথে কিছু সমস্যা পেয়েছি তাই আমি এগিয়ে গিয়ে jquery.lphanum লিখেছি । কোডটি এর মতো দেখাচ্ছে:
$("input").alphanum();
বা আরও সূক্ষ্ম নিয়ন্ত্রণের জন্য কিছু সেটিংস যুক্ত করুন:
$("#username").alphanum({
allow : "€$£",
disallow : "xyz",
allowUpper : false
});
আশা করি এটা সাহায্য করবে.
allow
সেটিংসে রাখার সময় এটি কাজ করে না । তবে এটি jquery প্লাগইনগুলির সৌন্দর্য, আপনার প্রয়োজন অনুসারে আপনি এগুলি পরিবর্তন করতে পারেন। ধন্যবাদ!
allow
বিকল্পটি ব্যবহার করে স্ল্যাশ সক্ষম করার চেষ্টা করেছি এবং এই কোডটি ব্যবহার করে এটি আমার পক্ষে ঠিক কাজ করেছে: $('#firstName').alphanum({allow: "/"});
আপনি আরও তথ্য সরবরাহ করতে পারেন এমন কোনও সুযোগ? দস্তাবেজগুলিতে কোনও বাগ বা সমস্যা থাকলে এটি ঠিক করে দেওয়া ভাল to চিয়ার্স
allowOtherCharSets: false
এবং allowCaseless: false
। এগুলি সেট করা সেটিংসে হস্তক্ষেপ করে allow
। আমার দৃষ্টিকোণ থেকে, আমি মনে করি যে allow
বিকল্পটি অন্যান্য সমস্ত বিকল্প (যেমন allowOtherCharSets
বা allowCaseless
) ভেটো করা উচিত । সুতরাং আপনি যদি allow
বিকল্পটিতে একটি অক্ষর নির্দিষ্ট করে থাকেন তবে কনফিগারেশন অবজেক্টে সেট করা অন্যান্য বিকল্প নির্বিশেষে এটিকে অনুমতি দেওয়া উচিত। একই জন্য যায় disallow
। তবে এটি কেবল আমার মতামত। :) আবার চিয়ার্স! :)
allow
এবং disallow
উচ্চতর অগ্রাধিকার পেতে V1.0.6 এ একটি সমাধান প্রকাশ করেছি । এটি # 7 ইস্যুতে লগ ইন । আশা করি এটি সহায়তা করে
এইচটিএমএল 5 এর প্যাটার্ন ইনপুট অ্যাট্রিবিউট ব্যবহার করুন!
<input type="text" pattern="^[a-zA-Z0-9]+$" />
আপনার পাঠ্যবক্স:
<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);
}
কোনও কিছুর অনুমতি দিতে বা বারণ করতে রিজেক্স ব্যবহার করুন। এছাড়াও, গৃহীত উত্তরের চেয়ে কিছুটা বেশি শক্তিশালী সংস্করণের জন্য, অক্ষরের সাথে কীগুলির সাথে কী (মূলত ব্যাকস্পেস, ট্যাব, তীরচিহ্নগুলি, মুছুন ইত্যাদি) সম্পর্কিত কোনও মূল মান নেই যা প্রথমে কীপ্রেস ইভেন্টের মধ্য দিয়ে যাওয়ার মাধ্যমে করা যেতে পারে এবং মান পরিবর্তে কীকোডের উপর ভিত্তি করে কীটি পরীক্ষা করুন।
$('#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;
}
});
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'});
টেক্সটবক্সের অ্যানকিপ্রেস ইভেন্টে কিছু জাভাস্ক্রিপ্ট কোড লিখুন। প্রয়োজন অনুসারে আপনার পাঠ্যবক্সে চরিত্রকে অনুমতি এবং সীমাবদ্ধ করুন
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
}
})
!e.charCode ? e.which : e.charCode
এবং সহজভাবে না e.charCode ? e.charCode : e.which
?
এটি এমন একটি উদাহরণ যা ব্যবহারকারীকে "ক" অক্ষর টাইপ করতে বাধা দেয়
$(function() {
$('input:text').keydown(function(e) {
if(e.keyCode==65)
return false;
});
});
কী কোডগুলি এখানে রেফারেন্স:
http://www.expandinghead.net/keycode.html
$(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, '');
}
});
});
হ্যাঁ আপনি 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
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)"/>
শুধু সংখ্যা:
'(' ইনপুট.টাইম ')। কীডাউন (ফাংশন (ঙ)) {যদি (e.keyCode> = 48 && e.keyCode <= 57) {সত্য প্রত্যাবর্তন করুন} অন্যথায় false মিথ্যা ফিরুন;}});
বা ":" সহ সময়ের জন্য
'(' ইনপুট.টাইম ') key কীডাউন (ফাংশন (ঙ)) {যদি (e.keyCode> = 48 && e.keyCode <= 58) {সত্য প্রত্যাবর্তন করুন} অন্যথায় {মিথ্যা ফিরুন;}});
মুছুন এবং ব্যাকস্পেস সহ:
'(' ইনপুট.টিম ') মিথ্যা;}});
দুর্ভাগ্যজনকভাবে এটি কোনও আইএমএসি-তে কাজ করতে পাচ্ছে না
ডেলের উত্তরে অ্যালেক্সের মন্তব্যে মন্তব্য করতে চেয়েছিলেন। সম্ভব নয় (প্রথমে কতটা "রেপ" দরকার? তা খুব তাড়াতাড়ি ঘটবে না .. অদ্ভুত সিস্টেম।) সুতরাং উত্তর হিসাবে:
ব্যাকস্পেসটি এ জাতীয় পুনরায় সংজ্ঞা হিসাবে \ বি যোগ করে যুক্ত করা যেতে পারে: [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();
}
});
কৌণিক ভাষায়, আমার পাঠ্যক্ষেত্রে আমার একটি সঠিক মুদ্রার বিন্যাস প্রয়োজন। আমার সমাধান:
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();
}
এইচটিএমএলে নির্দেশটি যুক্ত করুন
<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;
}
...
বিশেষ অক্ষর, স্থান প্রতিস্থাপন এবং নিম্ন কেসিতে রূপান্তর করতে
$(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();
}
}
}
});]
কেবলমাত্র পাঠ্যবক্সে সংখ্যার অনুমতি দিন (বর্ণমালা এবং বিশেষ অক্ষরগুলি সীমাবদ্ধ করুন)
/*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;
}