บทความนี้ได้แชร์เอฟเฟกต์พิเศษของหน้าเว็บอินพุตข้อความพิเศษ JS สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
ตัวอย่างที่ 1: ให้กล่องข้อความมีการขีดเส้นใต้เท่านั้น
<script type = "text/javascript"> function changetextylele () {// ให้กล่องข้อความมีเพียงขีดล่างเท่านั้น // รับ Dom Var mytext ของกล่องข้อความ = document.getElementById ("mytext"); mytext.style.borderColor = 'Black'; // ตั้งค่าสีชายแดน mytext.style.borderstyle = 'solid'; // ตั้งค่าสไตล์เส้นขอบเป็นเส้นทึบ mytext.style.borderWidth = '0 0 0 1px 0'; // ตั้งค่าขนาดเส้นขอบ 0 หมายถึงไม่} </script>ตัวอย่างที่ 2: ตัวอักษรตัวแรกหรือตัวอักษรทั้งหมดเป็นตัวพิมพ์ใหญ่
<script type = "text/javascript"> // ฟังก์ชั่นการตรวจสอบรูปแบบ validateInput () {// รับ dom ของกล่องข้อความ 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')) {// แยกอักขระข้อผิดพลาด errmsg = 'ตัวอักษรตัวอักษรแรก 1 ต้องเป็นตัวอักษร/n'; การแจ้งเตือน (errmsg); } if (val2! = '' &&! // b [az]+/b/.test (val2)) {// ข้อผิดพลาดแยกอักขระ errmsg = 'ตัวอักษรตัวแรกของกล่องข้อความ 2 ต้องเป็นตัวพิมพ์ใหญ่/n'; การแจ้งเตือน (errmsg); }} </script>ตัวอย่างที่ 3: กล่องข้อความที่สามารถป้อนหมายเลขได้เท่านั้น
<script type = "text/javascript"> // ฟังก์ชั่นการตรวจสอบรูปแบบ validateInput () {// รับ dom ของกล่องข้อความ var mytext = document.getElementById ("mytext"); var val = mytext.value; // รับค่าที่ป้อนโดยผู้ใช้ถ้า (! // b [0-9]+/b/.test (val)) {// ใช้การแจ้งเตือนการตรวจสอบปกติ ('ป้อนหมายเลขเท่านั้น'); // ข้อความแสดงข้อผิดพลาดเคล็ดลับ}} </script>ตัวอย่างที่ 4: ตรวจสอบรูปแบบอีเมลด้วยนิพจน์ทั่วไป
<script type = "text/javascript"> // ฟังก์ชั่นการตรวจสอบรูปแบบ validateInput () {// รับ dom ของกล่องข้อความ var mytext = document.getElementById ("mytext"); var email = mytext.value; // รับอินพุตอีเมลโดยผู้ใช้ // กำหนดนิพจน์ปกติ var eMailReg = /^( [[za-za-z0-9_-- เหมือนกันไปที่มากกว่า @( [outha-za-z0-9_-- เหมือนกัน? ถ้า (emailreg.test (อีเมล)) {// ตัดสินว่าจะตรงตามข้อกำหนดของรูปแบบการแจ้งเตือน ("ผ่านการรับรองแล้วการส่งจะได้รับอนุญาต"); // pass} else {alert ("ตรวจสอบล้มเหลวโปรดตรวจสอบการเข้าสู่อีกครั้ง"); // การตรวจสอบล้มเหลว}}} </script>ตัวอย่างที่ 5: ล้างเนื้อหากล่องข้อความเมื่อมันกลายเป็นโฟกัส
<script type = "text/javascript"> // ล้างฟังก์ชั่นเนื้อหา ClearContent (mytext) {mytext.value = ''; // ตั้งค่าของเนื้อหาข้อความเป็นอักขระ null} </script> <input type = "text" value = "" onfocus = "ClearContent (นี้)"/>>>>>> >>ตัวอย่างที่ 6: หลังจากผู้ใช้เข้าสู่การตรวจสอบรูปแบบทันที
<script type = "text/javascript"> function validateTel () {// การตรวจสอบรูปแบบ // รับ dom ของกล่องข้อความ var mytel = document.getElementById ("mytel"); var val = mytel.value; // รับค่าที่ป้อนโดยผู้ใช้ถ้า (! // b [0-9]+/b/.test (val)) {// ใช้การแจ้งเตือนการตรวจสอบปกติ ('ป้อนหมายเลขเท่านั้น'); // ข้อความแสดงข้อผิดพลาดพรอมต์ // รูปแบบการแก้ไขดึงดูดความสนใจ mytel.style.border = '1px Solid Red'; } อื่นถ้า (val.length! = 11) {// ความยาวต้องเป็นการแจ้งเตือน 11 บิต ('หมายเลขโทรศัพท์มือถือคือ 11 บิต'); // ตอบข้อความแสดงข้อผิดพลาด // แก้ไขสไตล์เพื่อดึงดูดความสนใจ mytel.style.border = '1px Solid Red'; } else {// แก้ไขสไตล์เพื่อระบุว่า myTel.style.border = '1px Solid Green'; กลับมาจริง; }} </script> <อินพุต type = "text" value = "" id = "myTel" onblur = "validateTel ()"/>ตัวอย่างที่ 7: เส้นขอบกล่องข้อความจะกะพริบเมื่อป้อนข้อความ
เป็นการดีที่สุดที่จะเขียน onfocus () และ onblur () เป็นคู่!
<script type = "text/javascript"> // เริ่มต้นฟังก์ชั่นฟังก์ชั่น init () {// รับข้อความทั้งหมด text texts = document.getElementByTagname ('input'); // ถ่ายโอนกล่องข้อความทั้งหมดสำหรับ (var i = 0; i <texts.length; i ++) {var t = ข้อความ [i]; // ตัวจับเวลาข้อความ VAR ปัจจุบัน; // หัวหน้างานโฟกัสเหตุการณ์ t.onfocus = function () {var e = this; // เก็บการอ้างอิงของ DOM ปัจจุบัน // ตัวจับเวลาที่เริ่มแฟลช = setInterval (ฟังก์ชัน () {// รับตัวแปรสีเส้นขอบปัจจุบัน var c = eSTYLE.BORDERCOLOR; สี} else {// มิฉะนั้นเส้นขอบจะเปลี่ยนเป็นสีเหลือง E.style.borderColor = 'สีเหลือง'; t.onblur = function () {// พูดถึงกิจกรรมลา // คืนค่าสีชายแดน t.style.borderColor = ''; ClearInterval (ตัวจับเวลา); // Clear Timer}}}} </script> <body style = "Text-Ag: Center;" onload = "init ();">ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น