Sự khác biệt giữa khuyết tật = bị vô hiệu hóa và đọc chỉ đọc = phạm lỗi chỉ đọc đối với các trường nhập dạng HTML?

Tôi đã đọc một chút về điều này, nhưng dường như tôi không thể tìm thấy bất cứ điều gì vững chắc về cách các trình duyệt khác nhau đối xử với mọi thứ.

Một readonlyyếu tố chỉ là không thể chỉnh sửa, nhưng được gửi khi gửi theo form. Một disabledyếu tố không thể chỉnh sửa và không được gửi khi gửi. Một điểm khác biệt là readonlycác yếu tố có thể được tập trung (và tập trung khi "lập bảng" thông qua một biểu mẫu) trong khi disabledcác yếu tố không thể.

Đọc thêm về điều này trong bài viết tuyệt vời này hoặc định nghĩa của w3c . Để trích dẫn phần quan trọng:

Sự khác biệt chính

Thuộc tính bị vô hiệu hóa

• Các giá trị cho các phần tử biểu mẫu bị vô hiệu hóa không được truyền cho phương thức bộ xử lý. W3C gọi đây là một yếu tố thành công. (Điều này hoạt động tương tự như các hộp kiểm mẫu không được kiểm tra.)
• Một số trình duyệt có thể ghi đè hoặc cung cấp kiểu dáng mặc định cho các thành phần biểu mẫu bị tắt. (Văn bản màu xám hoặc chữ nổi) Internet Explorer 5.5 đặc biệt khó chịu về điều này.
• Các yếu tố hình thức bị vô hiệu hóa không nhận được trọng tâm.
• Các yếu tố hình thức bị vô hiệu hóa được bỏ qua trong điều hướng tab.

Thuộc tính chỉ đọc

• Không phải tất cả các yếu tố hình thức có một thuộc tính chỉ đọc. Hầu hết các đáng chú ý, <SELECT>, <OPTION>, và <BUTTON>các yếu tố không phải chỉ đọc thuộc tính (mặc dù cả hai đều có các thuộc tính vô hiệu hóa)
• Các trình duyệt không cung cấp phản hồi trực quan mặc định mà phần tử biểu mẫu chỉ được đọc. (Đây có thể là một vấn đề mà xem bên dưới.)
• Các phần tử biểu mẫu với tập thuộc tính chỉ đọc sẽ được chuyển đến bộ xử lý biểu mẫu.
• Chỉ đọc các yếu tố hình thức có thể nhận được trọng tâm
• Chỉ đọc các yếu tố hình thức được bao gồm trong điều hướng theo thẻ.

Không có sự kiện nào được kích hoạt khi phần tử đang bị vô hiệu hóa thuộc tính.

Không ai trong số dưới đây sẽ được kích hoạt.

$("[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

Trong khi chỉ đọc sẽ được kích hoạt.

$("[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

Vô hiệu hóa có nghĩa là không có dữ liệu từ thành phần biểu mẫu đó sẽ được gửi khi biểu mẫu được gửi. Chỉ đọc có nghĩa là bất kỳ dữ liệu nào từ bên trong phần tử sẽ được gửi, nhưng người dùng không thể thay đổi nó.

Ví dụ:

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

Điều này sẽ gửi giá trị "Bob" cho thành phần "yourname".

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

Điều này sẽ không gửi gì cho phần tử "yourname".

Giống như các câu trả lời khác (bị vô hiệu hóa không được gửi đến máy chủ, chỉ đọc) nhưng một số trình duyệt ngăn việc tô sáng một hình thức bị vô hiệu hóa, trong khi chỉ đọc vẫn có thể được tô sáng (và sao chép).

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

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

Một trường chỉ đọc không thể được sửa đổi. Tuy nhiên, người dùng có thể tab vào nó, đánh dấu nó và sao chép văn bản từ nó.

Nếu giá trị của hộp văn bản bị vô hiệu hóa cần được giữ lại khi một biểu mẫu bị xóa (đặt lại), disabled = "disabled"phải được sử dụng, vì hộp văn bản chỉ đọc sẽ không giữ lại giá trị

Ví dụ:

HTML

Hộp văn bản

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

Nút reset

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

Trong ví dụ trên, khi nhấn nút Xóa, giá trị văn bản bị tắt sẽ được giữ lại trong biểu mẫu. Giá trị sẽ không được giữ lại trong trường hợpinput type = "text" readonly="readonly"