คุณสมบัติ pattern ของ HTML DOM Input Search ใช้สำหรับตั้งค่าหรือส่งคืนแอตทริบิวต์ pattern ของช่องค้นหา input คุณสมบัตินี้ตรวจสอบค่าในช่องค้นหาตามนิพจน์ปกติ (regular expression) ที่ระบุโดยคุณสมบัติ pattern
ไวยากรณ์
ไวยากรณ์สำหรับการตั้งค่าคุณสมบัติ pattern:
searchObject.pattern = regexp
ที่นี่ regexp เป็นนิพจน์ปกติที่ใช้ตรวจสอบช่องค้นหา
ตัวอย่าง
มาดูตัวอย่างสำหรับคุณสมบัติ pattern ของ Input Search:
<!DOCTYPE html> <html> <body> <h1>Input Search pattern property</h1> <p>The time inside search field can either be of three numeric characters or 6 alphabet characters from a to g</p> <form action="/Sample_page.php"> FRUITS: <input type="search" id="SEARCH1" name="fruits" pattern="[0-9]{3}|[a-g]{6}" title="Three numeric character or 6 alphabet between a-g"> <input type="submit"> </form> <br> <button onclick="passPattern()">GET PATTERN</button> <p id="Sample"></p> <script> function passPattern() { var P = document.getElementById("SEARCH1").pattern; document.getElementById("Sample").innerHTML ="The pattern attribute value is"+ P; } </script> </body> </html>
ผลลัพธ์
จะได้ผลลัพธ์ดังนี้:
เมื่อป้อนข้อความในช่องค้นหาที่ไม่ตรงกับ regex ใน pattern:
เมื่อคลิกปุ่ม GET PATTERN:
