وارد کردن فقط حروف انگلیسی در تکست باکس در html

جلوگیری از وارد کردن کاراکترهای فارسی در input توسط جی کوئری

برای کنترل اینکه کاراکترهای وارد شده توسط کاربر انگلیسی هستن یا فارسی می تونید از طریق کدهای جی کوئری این کار رو انجام بدید. برای این کار اول یک تگ input با type برابر با text رو ایجاد کنید. در کد زیر این کار رو انجام دادم

<input id="EnglishName" type="text" class="form-control" placeholder="Please enter your name and family ..." />

در تگ بالا id تگ input رو برابر با EnglishName قرار دادم. حالا بایستی وقتی کاراکتری توسط یک کاربر وارد میشه کنترل کنیم که آیا این کاراکتر فارسی هست یا انگلیسی و اگر فارسی بود به کاربر پیغام مناسب رو نمایش بدیم و یا اینکه کلا حذفش کنیم اون کاراکتر رو.

اعتبارسنجی کاراکترهای ورودی توسط جی کوئری

برای این منظور در قسمت کدهای جاوااسکریپت یا جی کوئری پروژه خودتون کد زیر رو بنویسید :

  <script>
        $('#EnglishName').on('keyup', function (event) {
            var arregex = /^[a-zA-Z0-9_ ]*$/;
            if (!arregex.test(event.key)) {
                $('#EnglishName').val("");
            }
        });
    </script>

خب در کد بالا وقتی رویداد OnKeyUp صدا زده میشه (یعنی وقتی که کاراکتری درون تگ EnglishName وارد میشه) این کدها فراخوانی میشن و عمل می کنن. در ابتدا در متغیر arregex یک Pattern رو تغریف کردیم.

در این پترن گفته شده

• حروف انگلیسی a کوچک تا z کوچک
• حروف انگلیسی A بزرگ تا Z بزرگ
• اعداد 0 تا 9
• کاراکتر _
• و یک کاراکتر فضای خالی یا Space هم نوشته شده

این کاراکترهای مجاز برای وارد شدن اطلاعات در تگ input هستن. در خط بعد توسط متد test که یکی از متدهای جاوااسکریپتی هست کنترل کردیم که آیا کاراکتر ورودی در پترن ما صحیح هست یا نه. اگر صحیح نبود یعنی کاراکتر وارد شده فارسی یا هر چیز دیگه ای بود قطعه کد زیر اجرا میشه

$('#EnglishName').val("");

یعنی مقدار input حذف میشه.

نکته : دقت کنید که در پترنی که تعریف می کنید حتما کاراکتر Space رو هم در نظر بگیرید چون در غیر این صورت با زدن هر Space کل متن ورودی حذف میشه.

در لینک زیر هم می تونید اطلاعاتی رو در این رابطه کسب کنید.