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

مشخصات سوال کننده :

کاربر : hamid_b امتیاز کاربر : 518 رتبه کاربر : 4

دسته بندی : Html جاوا اسکریپت جی کوئری PHP

نظر ویرایش گزارش نشان

به این سوال امتیاز بدهید 0

تعداد بازدید این سوال : 9213

هوش مصنوعی

پاسخ هوش مصنوعی

شما می توانید با استفاده از خاصیت pattern در تگ <input> برای محدود کردن کاراکترهای ورودی به حروف انگلیسی استفاده کنید. در زیر یک مثال آورده شده است:

<form>
    <label for="name">نام:</label>
    <input type="text" id="name" name="name" pattern="[A-Za-z]+" title="لطفاً فقط حروف انگلیسی وارد کنید" required>
    
    <label for="surname">نام خانوادگی:</label>
    <input type="text" id="surname" name="surname" pattern="[A-Za-z]+" title="لطفاً فقط حروف انگلیسی وارد کنید" required>
    
    <input type="submit" value="ارسال">
</form>

در این کد، خاصیت pattern="[A-Za-z]+" تعیین می کند که فقط حروف الفبای انگلیسی (بزرگ و کوچک) مجاز هستند. همچنین خاصیت title پیغام خطا را زمانی که ورودی نامعتبر باشد نشان می دهد.

به این پاسخ امتیاز بدهید 0

امتیاز: - رتبه: -

نظر ویرایش گزارش

هوش مصنوعی

پاسخ هوش مصنوعی

برای اطمینان از اینکه کاربر فقط حروف انگلیسی را بتواند در تکست باکس وارد کند، می توانید از جاوااسکریپت استفاده کنید. در زیر یک نمونه کد HTML همراه با جاوااسکریپت برای این کار آورده شده است:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>فورم ورود اطلاعات</title>
    <script>
        function validateInput(event) {
            const char = String.fromCharCode(event.keyCode);
            const pattern = /^[a-zA-Z]+$/;
            if (!pattern.test(char)) {
                event.preventDefault(); // اگر کاراکتر مجاز نبود، ورود آن را متوقف کن
            }
        }
    </script>
</head>
<body>
    <form>
        <label for="name">نام:</label>
        <input type="text" id="name" onkeypress="validateInput(event)" required>
        <br>
        <label for="surname">نام خانوادگی:</label>
        <input type="text" id="surname" onkeypress="validateInput(event)" required>
        <br>
        <input type="submit" value="ارسال">
    </form>
</body>
</html>

به این پاسخ امتیاز بدهید 0

امتیاز: - رتبه: -

نظر ویرایش گزارش

پاسخ دهنده : pedram_khan 18:23 1398/09/25

جلوگیری از وارد کردن کاراکترهای فارسی در 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 کل متن ورودی حذف میشه.

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

به این پاسخ امتیاز بدهید 0

امتیاز: 277 رتبه: 6

نظر ویرایش گزارش

آخرین سوالات ثبت ‌شده

سوالات مرتبط

آموزش های پرطرفدار

برای ارسال پاسخ لطفا وارد حساب کاربری خود شوید. ورود

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

پاسخ هوش مصنوعی

پاسخ هوش مصنوعی

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

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

آموزش ساخت اتوماسیون اداری تحت وب

آموزش ساخت سیستم فروش و انبارداری وب

آموزش ساخت سیستم حقوق و دستمزد وب با سینکفیوژن

آموزش ساخت سیستم آزمونگیر آنلاین