ประเภทอินพุต = "ข้อความ" เทียบกับประเภทอินพุต = "ค้นหา" ใน HTML5

ฉันเพิ่งเริ่มใช้ HTML5 เมื่อเริ่มทำงานกับช่องป้อนข้อมูลแบบฟอร์มใหม่ของ HTML5 เมื่อฉันทำงานกับช่องใส่แบบฟอร์มโดยเฉพาะ<input type="text" />และ<input type="search" />IMO ไม่มีความแตกต่างในเบราว์เซอร์หลักทั้งหมดรวมถึง Safari, Chrome, Firefox และ Opera และช่องค้นหายังทำงานเหมือนช่องข้อความทั่วไป

ดังนั้นความแตกต่างระหว่างinput type="text"และinput type="search"ใน HTML5 คืออะไร?

จุดประสงค์ที่แท้จริง<input type="search" />คืออะไร?

ตอนนี้ไม่มีเรื่องใหญ่ระหว่างพวกเขา - อาจจะไม่เกิดขึ้น อย่างไรก็ตามประเด็นคือให้ผู้ผลิตเบราว์เซอร์สามารถทำบางสิ่งพิเศษกับมันได้หากต้องการ

ลองนึกถึง<input type="number">โทรศัพท์มือถือนำแผ่นรองตัวเลขหรือtype="email"นำแป้นพิมพ์รุ่นพิเศษขึ้นมาโดยมี @ และ. com และส่วนที่เหลือ

บนโทรศัพท์มือถือการค้นหาอาจแสดงแอพเพล็ตการค้นหาภายในหากต้องการ

ในอีกด้านหนึ่งจะช่วย devs ปัจจุบันด้วย css

input[type=search]:after { content : url("magnifying-glass.gif"); }

มันไม่ทำอะไรเลยในเบราว์เซอร์ส่วนใหญ่ มันทำงานเหมือนการป้อนข้อความ นี่ไม่ใช่ปัญหา สเป็คไม่ได้ต้องการให้มันทำอะไรเป็นพิเศษ เบราว์เซอร์ WebKit จะปฏิบัติต่อมันแตกต่างกันเล็กน้อยโดยส่วนใหญ่เป็นสไตล์

อินพุตการค้นหาใน WebKit โดยค่าเริ่มต้นจะมีเส้นขอบที่ใส่เข้าไปมุมโค้งมนและการควบคุมการพิมพ์ที่เข้มงวด

นอกจากนี้

สิ่งนี้ไม่ได้บันทึกไว้ในที่ใดก็ตามที่ฉันรู้จักและไม่ได้อยู่ในข้อมูลจำเพาะ แต่คุณถ้าคุณเพิ่มพารามิเตอร์ผลลัพธ์ในอินพุต WebKit จะใช้แว่นขยายขนาดเล็กพร้อมลูกศรแบบเลื่อนลงที่แสดงผลลัพธ์ก่อนหน้านี้

<input type=search results=5 name=s>

การอ้างอิง

เหนือสิ่งอื่นใดมันให้ความหมายเชิงความหมายกับinput type.

ปรับปรุง:

Chrome 51 ลบการสนับสนุนแอตทริบิวต์ผลลัพธ์:

มองเห็น / ใช้งานได้ 2 ความแตกต่างหากประเภทอินพุตคือ ' ค้นหา ': -

1. คุณจะได้รับสัญลักษณ์ ' X ' ที่ท้ายช่องป้อนข้อมูล / ค้นหาเพื่อล้างข้อความในช่อง
2. การกดปุ่ม ' Esc ' บนแป้นพิมพ์จะเป็นการล้างข้อความด้วย

ในบางเบราว์เซอร์ยังสนับสนุนแอตทริบิวต์ "results" และ "autosave" ซึ่งมีฟังก์ชัน "การค้นหาล่าสุด" โดยอัตโนมัติด้วยไอคอนแว่นขยาย

ข้อมูลเพิ่มเติม

ที่จริงระวังให้มากโดยถือว่ามันไม่ได้ทำอะไรเลย เมื่อคุณไปที่อินพุตสไตล์ด้วยการค้นหาประเภทพวกเขามีคุณลักษณะบางอย่างที่ไม่สามารถเปลี่ยนแปลงได้ ลองเปลี่ยนเส้นขอบเพียงเส้นเดียวแล้วคุณจะพบว่ามันเป็นไปไม่ได้เลยทีเดียว มีคุณลักษณะอื่น ๆ อีกหลาย CSS ไม่ได้รับอนุญาตจะตรวจสอบนี้สำหรับรายละเอียดทั้งหมด

ตามที่ Jashwant กล่าวไว้มีแอตทริบิวต์ผลลัพธ์แม้ว่าจะทำงานได้ไม่ดีนักเว้นแต่คุณจะรวมแอตทริบิวต์บันทึกอัตโนมัติไว้ด้วย เมนูแบบเลื่อนลงจะไม่ทำงานในเบราว์เซอร์ส่วนใหญ่อย่างไรก็ตามโปรดใช้ด้วยความเสี่ยงของคุณเอง

เบราว์เซอร์มีการทำงานที่แตกต่างกันเมื่อคุณพิมพ์คำบางคำจากนั้นป้อน ESC type="search"ใน chrome / safari ช่องป้อนข้อมูลจะถูกล้าง แต่ในtype="text"สถานการณ์สมมติคำพูดจะไม่ถูกหักล้าง ดังนั้นควรระมัดระวังในการเลือกประเภทโดยเฉพาะอย่างยิ่งเมื่อคุณใช้สำหรับการเติมข้อความอัตโนมัติหรือคุณลักษณะที่เกี่ยวข้องกับการค้นหา

คะแนนโบนัส: input type="search"มีความสามารถในการใช้onsearchแอตทริบิวต์ (แม้ว่าฉันจะสังเกตเห็นว่าสิ่งนี้ใช้ไม่ได้ในเบราว์เซอร์ Edge ใหม่ของ Microsoft) ซึ่งไม่จำเป็นต้องเขียนonkeypress=if(key=13) { function() }สิ่งที่กำหนดเอง

การใช้ input type = "search" ทำให้ข้อความของ keybord enterkey แสดง "search" ซึ่งอาจปรับปรุงประสบการณ์ของผู้ใช้ อย่างไรก็ตามคุณต้องปรับสไตล์หากใช้ประเภทนี้

ขึ้นอยู่กับมุมมองของโปรแกรมเมอร์โปรแกรมเมอร์สามารถกำหนดวัตถุประสงค์ของการป้อนข้อมูลได้อย่างง่ายดายโดยดูจากประเภทและง่ายสำหรับการจัดรูปแบบ CSS และสำหรับ JavaScript หรือ JQuery ในการตรวจสอบกฎในอินพุต

แต่จะส่งผลเสียต่อองค์ประกอบอินพุตของคุณหากคุณตั้งค่าไว้

<input type="search">

และใน css ของคุณที่คุณตั้งไว้

input {background: url("images/search_bg.gif");}

มันจะไม่ปรากฏเลย