شاركت هذه المقالة المؤثرات الخاصة لصفحة الويب الخاصة لمربع إدخال النص الخاص بـ JS للرجوع إليها. المحتوى المحدد كما يلي
مثال 1: دع مربع النص يطير فقط
<script type = "text/javaScript"> function changetextStyle () {// اسمح لمربع النص فقط بترابط // الحصول على مربع النص DOM var myText = document.getElementByID ("myText") ؛ mytext.style.borderColor = 'Black' ؛ // قم بتعيين اللون الحدودي mytext.style.borderstyle = 'solid' ؛ . // اضبط حجم الحدود ، 0 يعني لا} </script>مثال 2: الرسالة الأولى أو جميع الرسائل تستفيد منها
<script type = "text/javaScript"> // format format validateInput () {// احصل على مربع النص var mytext1 = document.getElementById ("mytext1") ؛ var mytext2 = document.getElementById ("myText2") ؛ var val1 = mytext1.value ؛ // قيمة مربع النص 1 var val2 = mytext2.value ؛ // قيمة مربع النص 2 var errmsg = '' ؛ // تحديد حرف الخطأ حرف // الدفاع عما إذا كان يبدأ بأحرف رأس المال إذا (Val1! = '&& (val1.charat (0)>' z '|| val1.charat (0) <' a ')) {// split error errorsg =' الحرف الأول من مربع النص 1 يجب أن يكون رأسمًا/n '؛ تنبيه (errmsg) ؛ } if (val2! = '' &&! // b [az]+/b/.test (val2)) {// split error errmsg = 'الحرف الأول من مربع النص 2 يجب أن يتم رسملة/n' ؛ تنبيه (errmsg) ؛ }} </script>مثال 3: مربعات نصية يمكنها إدخال الأرقام فقط
<script type = "text/javaScript"> // format format fuldativeInput () {// احصل على DOM من مربع النص var mytext = document.getElementById ("myText") ؛ var val = mytext.value ؛ // احصل على القيمة التي أدخلها المستخدم if (! // b [0-9]+/b/.test (val)) {// استخدم تنبيه التحقق المنتظم ('فقط إدخال الأرقام') ؛ // رسالة خطأ نصيحة}} </script>مثال 4: تحقق من تنسيق البريد الإلكتروني مع تعبيرات منتظمة
<script type = "text/javaScript"> // format format fuldativeInput () {// احصل على DOM من مربع النص var mytext = document.getElementById ("myText") ؛ var email = mytext.value ؛ // احصل على إدخال البريد الإلكتروني بواسطة user // تحديد التعبير العادي var emailreg = /^ (Budapa-za-z0-9_-20100yber@( bududa-za-z0-9_- .-2000000 (/. if (emailReg.test (البريد الإلكتروني)) {// ugge ما إذا كان يفي بتنبيه متطلبات التنسيق ("يتم تمرير الشهادة ، يُسمح بالتقديم") ؛ // pass} آخر {Alert ("فشل التحقق ، يرجى التحقق من إعادة الدخول") ؛ // فشل التحقق}}} </script>مثال 5: امسح محتوى مربع النص عندما يصبح التركيز
<script type = "text/javaScript"> // مسح وظيفة المحتوى clearContent (myText) {mytext.value = '' ؛ // قم بتعيين قيمة محتوى النص على حرف خالي} </script> <إدخال type = "text" value = "" onfocus = "clearContent (this)"/>مثال 6: بعد دخول المستخدم إلى التحقق على الفور
<script type = "text/javaScript"> functionalateTel () {// format التحقق // احصل على dom of the text text var mytel = document.getElementById ("mytel") ؛ var val = mytel.value ؛ // احصل على القيمة التي أدخلها المستخدم if (! // b [0-9]+/b/.test (val)) {// استخدم تنبيه التحقق المنتظم ('فقط إدخال الأرقام') ؛ // رسالة خطأ موجه // تعديل النمط ، جذب الانتباه mytel.style.border = '1px solid Red' ؛ } آخر إذا (Val.Length! = 11) {// يجب أن يكون طول 11 بت تنبيه ('رقم الهاتف المحمول هو 11 بت') ؛ // أجب على رسالة الخطأ // قم بتعديل النمط لجذب الانتباه mytel.style.border = '1px solid Red' ؛ } آخر {// تعديل النمط للإشارة إلى أن mytel.style.border = '1px solid green' ؛ العودة صحيح. }} </script> <input type = "text" value = "" id = "mytel" onBlur = "Validatetel ()"/>مثال 7: تومض حدود مربع النص عند إدخال النص
من الأفضل كتابة onfocus () و onblur () في أزواج!
<script type = "text/javaScript"> // تهيئة وظيفة الدالة init () {// الحصول على جميع النصوص dom var text = document.getElementSbyTagName ('input') ؛ // نقل جميع مربعات النص لـ (var i = 0 ؛ i <sexts.length ؛ i ++) {var t = النصوص [i] ؛ . color} آخر {// على خلاف ذلك ، تتحول الحدود T.onblur = function () {// يتحدث عن أحداث الإجازة // يعيد اللون الحدودي t.style.bordercolor = '' ؛ ClearInterval (Timer) ؛ // Clear Timer}}}} </script> <body style = "text-align: center ؛" onload = "init () ؛">ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.