Làm cách nào để nhập văn bản không thể chỉnh sửa?

Vì vậy, tôi có một văn bản nhập

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

Đây là CSS của tôi cho nó

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; 

Có một thiết lập hoặc một mẹo cho việc này, tôi đã nghĩ đến việc làm một nhãn thay thế nhưng về kiểu dáng. Làm thế nào để tôi chuyển đổi chúng và có cách nào tốt hơn hay đó là cách duy nhất?

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

Không cần tạo kiểu.

Xem <input>trên MDN https://developer.mozilla.org/en/docs/Web/HTML/Euity/input#Attribut

Bạn có thể thêm thuộc tính readonlyvào đầu vào:

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

Thông tin thêm: http://www.w3schools.com/tags/att_input_readonly.asp

Bạn có thể sử dụng readonlythuộc tính, nếu bạn muốn đầu vào của bạn chỉ được đọc. Và bạn có thể sử dụng disabledthuộc tính, nếu bạn muốn đầu vào được hiển thị, nhưng hoàn toàn bị vô hiệu hóa (ngay cả các ngôn ngữ xử lý như PHP sẽ không thể đọc được các ngôn ngữ đó).

Chỉ cần hoàn thành các câu trả lời có sẵn:

Một yếu tố đầu vào có thể là chỉ đọc hoặc bị vô hiệu hóa (không ai trong số chúng có thể chỉnh sửa được, nhưng có một vài điểm khác biệt: trọng tâm, ...)

Có thể tìm thấy lời giải thích tốt ở đây:
Sự khác biệt giữa khuyết tật = bị vô hiệu hóa và readonly = xóa chỉ đọc đối với các trường nhập dạng HTML?

Cách sử dụng:

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

Ngoài ra còn có một số giải pháp để thực hiện thông qua CSS hoặc JavaScript như được giải thích ở đây .

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

Bạn có thể thấy trong https://www.w3schools.com/tags/att_input_readonly.asp

Phương pháp để đặt "chỉ đọc":

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

để hủy "readonly" (hoạt động trong jQuery):

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

thêm thuộc tính chỉ đọc

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

hoặc là -

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

không cần css!

bạn chỉ cần thêm vô hiệu hóa vào cuối

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

Thêm readonly:

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

Nếu bạn muốn giá trị không được gửi trong một biểu mẫu, thay vào đó hãy thêm disabledthuộc tính.

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

Không có cách nào để sử dụng CSS luôn hoạt động để làm điều này.

Tại sao? CSS không thể "vô hiệu hóa" bất cứ điều gì. Bạn vẫn có thể tắt hiển thị hoặc hiển thị và sử dụng pointer-events: nonenhưng pointer-eventskhông hoạt động trên các phiên bản IE xuất hiện sớm hơn IE 11.

nếu bạn thực sự muốn sử dụng CSS , hãy sử dụng thuộc tính sau sẽ làm cho trường không thể chỉnh sửa được.

pointer-events: none;