ความแตกต่างระหว่าง disabled =“ disabled” และ readonly =“ readonly” สำหรับช่องป้อนแบบฟอร์ม HTML คืออะไร

ฉันได้อ่านนิดหน่อยแล้ว แต่ฉันไม่สามารถหาอะไรที่เป็นของแข็งเกี่ยวกับวิธีที่เบราว์เซอร์ที่แตกต่างกันปฏิบัติต่อสิ่งต่าง ๆ

readonlyองค์ประกอบเป็นเพียงไม่สามารถแก้ไขได้ แต่ได้รับการส่งเมื่อตามformส่ง disabledองค์ประกอบไม่สามารถแก้ไขได้และไม่ได้ส่งไปส่ง ความแตกต่างอีกอย่างคือreadonlyองค์ประกอบสามารถเน้น (และการเน้นเมื่อ "แท็บ" ผ่านฟอร์ม) ในขณะที่disabledองค์ประกอบไม่สามารถทำได้

อ่านข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ในบทความดีดีนี้หรือนิยามของ W3C เพื่ออ้างอิงส่วนสำคัญ:

ความแตกต่างที่สำคัญ

คุณลักษณะปิดใช้งาน

• ค่าสำหรับองค์ประกอบของฟอร์มที่ปิดใช้งานจะไม่ถูกส่งผ่านไปยังวิธีการประมวลผล W3C เรียกสิ่งนี้ว่าองค์ประกอบที่ประสบความสำเร็จ (ทำงานคล้ายกับกล่องกาเครื่องหมายแบบฟอร์มที่ไม่ได้ทำเครื่องหมาย)
• เบราว์เซอร์บางตัวอาจแทนที่หรือกำหนดสไตล์เริ่มต้นสำหรับองค์ประกอบของฟอร์มที่ปิดใช้งาน (เป็นสีเทาหรือข้อความนูน) Internet Explorer 5.5 น่ารังเกียจเป็นพิเศษเกี่ยวกับเรื่องนี้
• องค์ประกอบแบบฟอร์มที่ปิดใช้งานไม่ได้รับการมุ่งเน้น
• องค์ประกอบแบบฟอร์มที่ปิดใช้งานจะถูกข้ามในการนำทางแบบแท็บ

แอตทริบิวต์อ่านอย่างเดียว

• องค์ประกอบแบบฟอร์มบางส่วนนั้นมีแอตทริบิวต์แบบอ่านอย่างเดียว ที่โดดเด่นที่สุดคือ<SELECT>, <OPTION>และ<BUTTON>องค์ประกอบไม่ได้อ่านได้อย่างเดียวแอตทริบิวต์ (แม้ว่าพวกเขาทั้งสองมีคุณลักษณะที่ปิดใช้งาน)
• เบราว์เซอร์ไม่มีการตอบกลับแบบภาพซ้อนทับที่เป็นค่าเริ่มต้นว่าองค์ประกอบของฟอร์มจะอ่านได้อย่างเดียว (อาจเป็นปัญหา…ดูด้านล่าง)
• องค์ประกอบแบบฟอร์มที่มีชุดคุณลักษณะแบบอ่านอย่างเดียวจะถูกส่งผ่านไปยังตัวประมวลผลแบบฟอร์ม
• อ่านอย่างเดียวองค์ประกอบของฟอร์มสามารถรับโฟกัสได้
• องค์ประกอบแบบอ่านอย่างเดียวจะรวมอยู่ในการนำทางแบบแท็บ

ไม่มีเหตุการณ์ใดถูกกระตุ้นเมื่อองค์ประกอบนั้นปิดใช้งานแอตทริบิวต์

ไม่มีการเรียกด้านล่างใด ๆ

$("[disabled]").click( function(){ console.log("clicked") });//No Impact
$("[disabled]").hover( function(){ console.log("hovered") });//No Impact
$("[disabled]").dblclick( function(){ console.log("double clicked") });//No Impact

ในขณะที่อ่านอย่างเดียวจะถูกเรียก

$("[readonly]").click( function(){ console.log("clicked") });//log - clicked
$("[readonly]").hover( function(){ console.log("hovered") });//log - hovered
$("[readonly]").dblclick( function(){ console.log("double clicked") });//log - double clicked

ปิดใช้งานหมายความว่าจะไม่มีการส่งข้อมูลจากองค์ประกอบของฟอร์มนั้นเมื่อส่งฟอร์ม อ่านอย่างเดียวหมายถึงข้อมูลใด ๆ จากภายในองค์ประกอบจะถูกส่ง แต่ผู้ใช้ไม่สามารถเปลี่ยนแปลงได้

ตัวอย่างเช่น:

<input type="text" name="yourname" value="Bob" readonly="readonly" />

สิ่งนี้จะส่งค่า "Bob" สำหรับองค์ประกอบ "yourname"

<input type="text" name="yourname" value="Bob" disabled="disabled" />

สิ่งนี้จะไม่ส่งอะไรเลยสำหรับองค์ประกอบ "yourname"

เช่นเดียวกับคำตอบอื่น ๆ (ปิดการใช้งานไม่ได้ถูกส่งไปยังเซิร์ฟเวอร์อ่านอย่างเดียว) แต่เบราว์เซอร์บางตัวป้องกันการเน้นรูปแบบที่ปิดการใช้งานในขณะที่ยังคงเน้นสีอ่านได้อย่างเดียว (และคัดลอก)

http://www.w3schools.com/tags/att_input_disabled.asp

http://www.w3schools.com/tags/att_input_readonly.asp

ไม่สามารถแก้ไขฟิลด์อ่านอย่างเดียวได้ อย่างไรก็ตามผู้ใช้สามารถแท็บไฮไลต์และคัดลอกข้อความได้

หากค่าของกล่องข้อความที่ปิดใช้งานจำเป็นต้องเก็บรักษาไว้เมื่อมีการล้างแบบฟอร์ม (รีเซ็ต) disabled = "disabled"ต้องใช้เนื่องจากกล่องข้อความแบบอ่านอย่างเดียวจะไม่เก็บค่าไว้

ตัวอย่างเช่น:

HTML

กล่องข้อความ

<input type="text" id="disabledText" name="randombox" value="demo" disabled="disabled" />

ปุ่มรีเซ็ต

<button type="reset" id="clearButton">Clear</button>

ในตัวอย่างด้านบนเมื่อกดปุ่ม Clear ค่าข้อความที่ปิดใช้งานจะถูกเก็บไว้ในแบบฟอร์ม ค่าจะไม่ถูกเก็บไว้ในกรณีของinput type = "text" readonly="readonly"