ฉันจะทำให้การป้อนข้อความไม่สามารถแก้ไขได้อย่างไร

ดังนั้นฉันมีการป้อนข้อความ

<input type="text" value="3" class="field left">

นี่คือ CSS ของฉันสำหรับมัน

background:url("images/number-bg.png") no-repeat scroll 0 0 transparent;
border:0 none;
color:#FFFFFF;
height:17px;
margin:0 13px 0 0;
text-align:center;
width:17px; 

มีการตั้งค่าหรือเคล็ดลับเกี่ยวกับเรื่องนี้หรือไม่ฉันกำลังคิดที่จะทำป้ายกำกับแทน ฉันจะแปลงพวกเขาและมีวิธีที่ดีกว่าหรือเป็นวิธีเดียวได้อย่างไร

<input type="text" value="3" class="field left" readonly>

ไม่จำเป็นต้องใส่สไตล์

ดู<input>ที่ MDN https://developer.mozilla.org/en/docs/Web/HTML/Element/input#Attributes

คุณสามารถเพิ่มคุณสมบัติreadonlyให้กับอินพุต:

<input type="text" value="3"
       class="field left" readonly="readonly">

ข้อมูลเพิ่มเติม: http://www.w3schools.com/tags/att_input_readonly.asp

คุณสามารถใช้แอreadonlyททริบิวหากคุณต้องการให้อินพุตของคุณเท่านั้นที่จะอ่าน และคุณสามารถใช้แอdisabledททริบิวต์ได้หากคุณต้องการให้อินพุทปรากฏ แต่ปิดการใช้งานโดยสิ้นเชิง (แม้จะใช้ภาษาที่ประมวลผลเช่น PHP จะไม่สามารถอ่านได้)

เพียงทำคำตอบให้สมบูรณ์:

องค์ประกอบอินพุตสามารถเป็นแบบอ่านอย่างเดียวหรือปิดใช้งาน (ไม่มีองค์ประกอบใดที่สามารถแก้ไขได้ แต่มีความแตกต่างสองประการ: โฟกัส, ... )

คำอธิบายที่ดีสามารถพบได้ที่นี่:
อะไรคือความแตกต่างระหว่าง disabled =“ disabled” และ readonly =“ readonly” สำหรับช่องป้อนแบบฟอร์ม HTML?

วิธีใช้:

<input type="text" value="Example" disabled /> 
<input type="text" value="Example" readonly />

นอกจากนี้ยังมีการแก้ปัญหาบางอย่างที่จะทำให้มันผ่าน CSS หรือ JavaScript ตามที่อธิบายอยู่ที่นี่

<input type="text" value="3" class="field left" readonly>

คุณสามารถดูได้ในhttps://www.w3schools.com/tags/att_input_readonly.asp

วิธีการตั้งค่า "อ่านอย่างเดียว":

$("input").attr("readonly", true)

เพื่อยกเลิก "อ่านอย่างเดียว" (ทำงานใน jQuery):

$("input").attr("readonly", false)

เพิ่มคุณสมบัติแบบอ่านอย่างเดียว

<input type="text" value="3" class="field left" readonly="readonly" >

หรือ -

<input type="text" value="3" class="field left" readonly>

ไม่จำเป็นต้องใช้ CSS!

คุณต้องเพิ่มปิดการใช้งานในตอนท้าย

<input type="text" value="3" class="field left" disabled>

เพิ่มreadonly:

<input type="text" value="3" class="field left" readonly>

ถ้าคุณต้องการที่จะไม่ส่งค่าในแบบฟอร์มให้เพิ่มdisabledแอตทริบิวต์แทน

<input type="text" value="3" class="field left" disabled>

ไม่มีวิธีใช้ CSS ที่ใช้งานได้ตลอดเวลา

ทำไม? CSS ไม่สามารถ "ปิดการใช้งาน" อะไรก็ได้ คุณยังสามารถปิดการแสดงผลหรือการมองเห็นและการใช้งานpointer-events: noneแต่pointer-eventsไม่สามารถใช้งานได้กับ IE เวอร์ชันที่ออกมาเร็วกว่า IE 11

หากคุณต้องการใช้CSSจริงๆให้ใช้คุณสมบัติต่อไปนี้ซึ่งจะทำให้ฟิลด์ไม่สามารถแก้ไขได้

pointer-events: none;