javascript - Sự kiện trên một input bị vô hiệu hóa

Rõ ràng một <input> bị vô hiệu hóa không được xử lý bởi bất kỳ sự kiện nào

Có cách nào để khắc phục vấn đề này không?

<input type="text" disabled="disabled" name="test" value="test" />

$(':input').click(function () {
    $(this).removeAttr('disabled');
})

Ở đây, tôi cần nhấp vào ô nhập liệu để kích hoạt nó. Nhưng nếu tôi không kích hoạt nó, ô nhập liệu không nên được gửi đi.

Câu trả lời #1

Các phần tử bị vô hiệu hóa không kích hoạt các sự kiện chuột. Hầu hết các trình duyệt sẽ truyền một sự kiện xuất phát từ phần tử bị vô hiệu hóa lên cây DOM, vì vậy các trình xử lý sự kiện có thể được đặt trên các phần tử chứa. Tuy nhiên, Firefox không hiển thị hành vi này, nó chỉ không làm gì cả khi bạn nhấp vào một phần tử bị vô hiệu hóa.

Tôi không thể nghĩ ra một giải pháp tốt hơn, nhưng để tương thích đầy đủ trên các trình duyệt, bạn có thể đặt một phần tử trước ô nhập liệu bị vô hiệu hóa và bắt sự kiện nhấp chuột trên phần tử đó. Đây là một ví dụ về những gì tôi muốn nói:

<div style="display:inline-block; position:relative;">
  <input type="text" disabled />
  <div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>

jq :

$("div > div").click(function (evt) {
    $(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});

Ví dụ: http://jsfiddle.net/RXqAm/170/ (cập nhật để sử dụng jQuery 1.7 với prop thay vì attr).

Câu trả lời #2

Các phần tử bị vô hiệu hóa "ăn" các cú nhấp chuột trong một số trình duyệt - chúng vừa không phản hồi các cú nhấp chuột đó, vừa không cho phép chúng bị bắt bởi các trình xử lý sự kiện ở bất kỳ đâu trên phần tử hoặc bất kỳ vùng chứa nào của nó.

Theo ý kiến cá nhân của tôi, cách đơn giản và sạch sẽ nhất để "sửa" điều này (nếu bạn thực sự cần bắt các lần nhấp vào các phần tử bị vô hiệu hóa như người đặt câu hỏi) là chỉ cần thêm CSS sau vào trang của bạn:

input[disabled] {pointer-events:none}

Điều này sẽ khiến bất kỳ lần nhấp nào vào một input bị vô hiệu hóa sẽ truyền xuống phần tử cha, nơi bạn có thể xử lý chúng một cách bình thường. (Nếu bạn có nhiều input bị vô hiệu hóa, bạn có thể muốn đặt mỗi input vào một container riêng, nếu chúng chưa được sắp xếp theo cách đó - ví dụ thêm một <span> hoặc <div> - chỉ để dễ dàng phân biệt input bị vô hiệu hóa nào đã được nhấp).

Nhược điểm là mẹo này thật không may sẽ không hoạt động trên các trình duyệt cũ không hỗ trợ thuộc tính CSS pointer-events. (Nó nên hoạt động từ IE 11, FF v3.6, Chrome v4): caniuse.com/#search=pointer-events

Nếu bạn cần hỗ trợ các trình duyệt cũ hơn, bạn sẽ cần sử dụng một trong những câu trả lời khác!

Câu trả lời #3

Có lẽ bạn có thể làm cho trường chỉ đọc và khi gửi thì vô hiệu hóa tất cả các trường chỉ đọc

$(".myform").submit(function(e) {
  $("input[readonly]").prop("disabled", true);
});

và đầu vào (+ kịch bản) nên là

<input type="text" readonly="readonly" name="test" value="test" />

$('input[readonly]').click(function () {
  $(this).removeAttr('readonly');
});

Một ví dụ trực tiếp:

$(".myform").submit(function(e) {
  $("input[readonly]").prop("disabled", true);
  e.preventDefault();
});


$('.reset').click(function () {
  $("input[readonly]").prop("disabled", false);
})

$('input[readonly]').click(function () {
  $(this).removeAttr('readonly');
})

input[readonly] {
  color: gray;
  border-color: currentColor;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="myform">
  <input readonly="readonly" value="test" />
  <input readonly="readonly" value="test" />
  <input readonly="readonly" value="test" />
  <input readonly="readonly" value="test" />
  <input readonly="readonly" value="test" />
  <input readonly="readonly" value="test" />
  <input readonly="readonly" value="test" />
  <input readonly="readonly" value="test" />
  <input readonly="readonly" value="test" />
  
  <button>Submit</button>
  <button class="reset" type="button">Reset</button>
</form>

Câu trả lời số 4

Tôi đề xuất một phương án thay thế - sử dụng CSS:

input.disabled {
    user-select : none;
    -moz-user-select : none;
    -webkit-user-select : none;
    color: gray;
    cursor: pointer;
}