how to allow only arabic characters in form text field using jquery
I tried with this but the arrows are not allowing to get back from last line
Let me know if any or edit my code or give any new code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<head>
<title>Character Filtering</title>
<script type="text/javascript">
function CheckArabicOnly(field) {
var sNewVal = "";
var sFieldVal = field.value;
for (var i = 0; i < sFieldVal.length; i++) {
var ch = sFieldVal.charAt(i),
c = ch.charCodeAt(0);
if (field.keyCode = '38') {
}
else if (field.keyCode = '40') {
// down arrow
}
else if (field.keyCode = '37') {
}
else if (field.keyCode = '39') {
// right arrow
}
if (c < 1536 || c > 1791) {
// Discard
}
else {
sNewVal += ch;
}
}
field.value = sNewVal;
}
</script>
</head>
<body>
Arabic Only (onchange):
<input type="text"
id="txtArabic"
onchange="CheckArabicOnly(this);"
onkeypress="CheckArabicOnly(this);"
onkeyup="CheckArabicOnly(this);"
onpaste="CheckArabicOnly(this);" />
<br />
</body>
</html>
how to allow only arabic characters in form text field using jquery
I tried with this but the arrows are not allowing to get back from last line
Let me know if any or edit my code or give any new code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<title>Character Filtering</title>
<script type="text/javascript">
function CheckArabicOnly(field) {
var sNewVal = "";
var sFieldVal = field.value;
for (var i = 0; i < sFieldVal.length; i++) {
var ch = sFieldVal.charAt(i),
c = ch.charCodeAt(0);
if (field.keyCode = '38') {
}
else if (field.keyCode = '40') {
// down arrow
}
else if (field.keyCode = '37') {
}
else if (field.keyCode = '39') {
// right arrow
}
if (c < 1536 || c > 1791) {
// Discard
}
else {
sNewVal += ch;
}
}
field.value = sNewVal;
}
</script>
</head>
<body>
Arabic Only (onchange):
<input type="text"
id="txtArabic"
onchange="CheckArabicOnly(this);"
onkeypress="CheckArabicOnly(this);"
onkeyup="CheckArabicOnly(this);"
onpaste="CheckArabicOnly(this);" />
<br />
</body>
</html>
- in arrow i have a problem can you help me here the code – mad dog Commented Dec 14, 2015 at 11:49
2 Answers
Reset to default 8As of Unicode 6.1, the Arabic script is contained in the following blocks (from Regular Expression For Arabic Language)
Arabic (0600—06FF, 225 characters)
Arabic Supplement (0750—077F, 48 characters)
Arabic Extended-A (08A0—08FF, 39 characters)
Arabic Presentation Forms-A (FB50—FDFF, 608 characters)
Arabic Presentation Forms-B (FE70—FEFF, 140 characters)
Rumi Numeral Symbols (10E60—10E7F, 31 characters)
Arabic Mathematical Alphabetic Symbols (1EE00—1EEFF, 143 characters)
Use a regexp validation for your text field with whatever framework you are using.
var isArabic = /^([\u0600-\u06ff]|[\u0750-\u077f]|[\ufb50-\ufbc1]|[\ufbd3-\ufd3f]|[\ufd50-\ufd8f]|[\ufd92-\ufdc7]|[\ufe70-\ufefc]|[\ufdf0-\ufdfd])*$/g;
// Solution 1: This will add an error class when the input does not match
$("#txtArabic1").change(function() {
$(this).toggleClass("has-error", !isArabic.test(this.value));
})
// Solution 2: This will not let the user type chars that are not arabic
// but seem to fail on my browser... I don't quite get how does
// javascript splits the string.
$("#txtArabic2").bind('keyup', function(e) {
var filterFn = isArabic.test.bind(isArabic),
newValue = this.value.split('').filter(filterFn).join('');
if (this.value != newValue)
this.value = newValue;
});
Here is a jsfiddle
Here is a working solution tested on PC and Android phones:
$(".filterText").on("input paste", function (e) {
var formControl = $(e.target);
var valueBeforeChange = formControl.val();
var allowedValue = ' ';
allowedValue += "اآبپتثجچهخدذرزژسشصضطظعغفقکگلمنوهی";//or any collection in any language you want
allowedValue += "0123456789"; // normal digits
allowedValue += "۰۱۲۳۴۵۶۷۸۹"; // arabic digits
allowedValue += "،."; // allowed symbols
var valueAfterChange = '';
for (var i = 0; i < valueBeforeChange.length; i++) {
var tmpChar = valueBeforeChange.charAt(i);
if (allowedValue.indexOf(tmpChar) > -1) valueAfterChange = valueAfterChange + tmpChar;
}
formControl.val(valueAfterChange);
});