تحسين تجربة المستخدم: ضبط إدخال الأرقام في جافا سكريبت
في سياق تطوير صفحات الويب وبرمجة الجافا سكريبت، يمكنك تحقيق إدخال الأرقام فقط في مربع النص باستخدام الكود التالي:
htmlhtml>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>إدخال الأرقام فقط في جافا سكريبتtitle>
head>
<body>
<p>أنا غير متأكد من كيفية إنشاء مربع نص يسمح فقط بإدخال الأرقام. لقد قمت بإنشاء إصدار HTML للإدخال ولكنني بحاجة إلى نفس نوع الإدخال في جافا سكريبت.p>
<p>إليك إدخالي الحالي في HTML:p>
<pre><code><input type="text" autocomplete="off" ondragstart="return false;" ondrop="return false;" onpaste="return false;" onkeypress="return event.charCode >= 48 && event.charCode <= 57;">المبلغ</input>code>pre>
<script>
document.addEventListener("DOMContentLoaded", function () {
var amountInput = document.querySelector('input[type="text"]');
amountInput.addEventListener("input", function () {
// تنقيح القيمة المدخلة لتكون أرقام فقط
this.value = this.value.replace(/[^\d]/g, '');
});
});
script>
body>
html>
هذا الكود يستخدم جافا سكريبت لتحقيق السيطرة على إدخال الأرقام فقط. عندما يتم إدخال أي قيمة، يتم استخدام الحدث “input” لتنفيذ وظيفة تقوم بتنقية القيمة المدخلة لتتأكد من أنها تحتوي على أرقام فقط، وذلك باستخدام تعبير منتظم يستبدل أي حرف غير رقمي بسلسلة فارغة.
المزيد من المعلومات
في مجال تطوير صفحات الويب وبرمجة الجافا سكريبت، يعتبر التحكم في إدخال المستخدم وضمان أن يكون الإدخال صالحًا جزءًا أساسيًا من تحسين تجربة المستخدم. في مثال الكود السابق، نستخدم العديد من الطرق لتحقيق هذا الهدف.
-
HTML Input:
في عنصر الإدخال في HTML، نقوم بتحديد نوع الإدخال (type="text") ونقوم بتعطيل بعض الإجراءات غير المرغوب فيها مثل السحب والإفلات واللصق باستخدام الأحداثondragstartوondropوonpaste. -
JavaScript Code:
- نستخدم الحدث
inputللتقاط التغييرات التي يقوم بها المستخدم في المدخل. - نستخدم
querySelectorللعثور على عنصر الإدخال في DOM. - في المستمع لحدث
input، نقوم بتنفيذ وظيفة تقوم بتنقية القيمة المدخلة باستخدام تعبير منتظم (/[^\d]/g)، الذي يقوم بإزالة أي حرف غير رقمي.
- نستخدم الحدث
-
تحسينات إضافية:
- يمكن تحسين الكود بمتابعة تحسينات إضافية مثل إظهار رسالة خطأ إذا تم إدخال حرف غير صالح.
- يمكن تعزيزه أيضًا بإضافة تنسيق أفضل لتحسين تجربة المستخدم.
هذا النهج يسعى إلى توفير تجربة مستخدم سلسة ويقوم بضبط الإدخال ليتناسب مع الاحتياجات المحددة، مما يقلل من فرص إدخال بيانات غير صالحة ويحسن دقة البيانات.