วิธีปิดการใช้งานประเภทอินพุต = ข้อความ?

ฉันต้องการปิดใช้งานการเขียนในช่องป้อนข้อมูลประเภทtextโดยใช้ JavaScript ถ้าเป็นไปได้ ช่องป้อนข้อมูลถูกเติมจากฐานข้อมูล นั่นคือเหตุผลที่ฉันไม่ต้องการให้ผู้ใช้แก้ไขค่าของมัน

หากคุณทราบสิ่งนี้เมื่อแสดงเพจซึ่งดูเหมือนว่าคุณทำเพราะฐานข้อมูลมีค่าควรปิดใช้งานเมื่อแสดงผลแทน JavaScript ในการทำเช่นนั้นเพียงเพิ่มreadonlyแอตทริบิวต์ (หรือdisabledถ้าคุณต้องการลบออกจากการส่งแบบฟอร์มด้วย) ใน<input>ลักษณะนี้:

<input type="text" disabled="disabled" />
//or...
<input type="text" readonly="readonly" />

document.getElementById('foo').disabled = true;

หรือ

document.getElementById('foo').readOnly = true;

โปรดทราบว่าreadOnlyควรอยู่ใน camelCase เพื่อให้ทำงานได้อย่างถูกต้องใน Firefox (มายากล)

การสาธิต: https://jsfiddle.net/L96svw3c/ - ค่อนข้างอธิบายความแตกต่างระหว่างและdisabledreadOnly

หากเติมข้อมูลจากฐานข้อมูลคุณอาจพิจารณาไม่ใช้<input>แท็กเพื่อแสดง อย่างไรก็ตามคุณสามารถปิดใช้งานได้ทันทีในแท็ก:

<input type='text' value='${magic.database.value}' disabled>

หากคุณต้องการปิดการใช้งานด้วย Javascript ในภายหลังคุณสามารถตั้งค่าแอตทริบิวต์ "disabled":

document.getElementById('theInput').disabled = true;

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

คุณยังสามารถโดย jquery:

$('#foo')[0].disabled = true;

ตัวอย่างการทำงาน:

$('#foo')[0].disabled = true;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="foo" placeholder="placeholder" value="value" />

รับการอ้างอิงไปยังช่องป้อนข้อมูลของคุณตามที่คุณต้องการ (เช่นdocument.getElementById('mytextbox')) และตั้งค่าreadonlyคุณสมบัติเป็นtrue:

myInputBox.readonly = true;

หรือคุณสามารถเพิ่มคุณสมบัตินี้แบบอินไลน์ (ไม่จำเป็นต้องใช้ JavaScript):

<input type="text" value="from db" readonly="readonly" />