Làm cách nào để tắt kiểu nhập = văn bản?

Tôi muốn tắt tính năng viết trong loại trường nhập textbằng JavaScript, nếu có thể. Trường đầu vào được điền từ cơ sở dữ liệu; đó là lý do tại sao tôi không muốn người dùng sửa đổi giá trị của nó.

Nếu bạn biết điều này khi trang được hiển thị, điều này nghe có vẻ giống như bạn làm vì cơ sở dữ liệu có một giá trị, tốt hơn nên tắt nó khi được hiển thị thay vì JavaScript. Để làm điều đó, chỉ cần thêm readonlythuộc tính (hoặc disabled, nếu bạn cũng muốn xóa nó khỏi quá trình gửi biểu mẫu) vào <input>, như sau:

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

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

hoặc là

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

Lưu ý rằng readOnlyphải có trong camelCase để hoạt động chính xác trong Firefox (ma thuật).

Demo: https://jsfiddle.net/L96svw3c/ - phần nào giải thích sự khác biệt giữa disabledvà readOnly.

Nếu dữ liệu được điền từ cơ sở dữ liệu, bạn có thể cân nhắc không sử dụng <input>thẻ để hiển thị nó. Tuy nhiên, bạn có thể tắt nó ngay trong thẻ:

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

Nếu bạn cần tắt nó bằng Javascript sau này, bạn có thể đặt thuộc tính "vô hiệu hóa":

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

Theo <input>kinh nghiệm của tôi, lý do tôi đề nghị không hiển thị giá trị là nó gây ra các vấn đề về bố cục. Nếu văn bản dài, thì trong một <input>người dùng sẽ cần phải thử và cuộn văn bản, đây không phải là điều mà người bình thường sẽ đoán làm được. Nếu bạn chỉ thả nó vào một <span>hoặc một cái gì đó, bạn có thể linh hoạt hơn trong việc tạo kiểu.

Bạn cũng có thể bằng jquery:

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

Ví dụ làm việc:

$('#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" />

Nhận tham chiếu đến hộp nhập liệu của bạn theo bất kỳ cách nào bạn thích (ví dụ document.getElementById('mytextbox')) và đặt thuộc tính của nó readonlythành true:

myInputBox.readonly = true;

Ngoài ra, bạn có thể chỉ cần thêm nội dòng thuộc tính này (không cần JavaScript):

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