Sự kiện trên đầu vào bị vô hiệu hóa

Rõ ràng một người khuyết tật <input>không được xử lý bởi bất kỳ sự kiện

Có cách nào để giải quyết 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 đầu vào để kích hoạt nó. Nhưng nếu tôi không kích hoạt nó, đầu vào không nên được đăng.

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

Tôi không thể nghĩ ra giải pháp nào tốt hơn, nhưng để tương thích hoàn toàn với trình duyệt, bạn có thể đặt một phần tử trước đầu vào bị vô hiệu hóa và bắt nhấp vào 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 cập nhật để sử dụng jQuery 1.7 propthay vì attr).

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

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

và đầu vào (+ script) phải là

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

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

Các phần tử bị vô hiệu hóa "ăn" các nhấp chuột trong một số trình duyệt - chúng không phản hồi với chúng, cũng 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ó.

IMHO cách đơn giản nhất, gọn gàng nhất để "khắc phục" điều này (nếu thực tế bạn cần phải nắm bắt các nhấp chuột vào các yếu tố bị vô hiệu hóa như OP) chỉ là thêm CSS sau vào trang của bạn:

input[disabled] {pointer-events:none}

Điều này sẽ làm cho bất kỳ nhấp chuột nào vào đầu vào bị vô hiệu hóa rơi vào phần tử cha, nơi bạn có thể chụp chúng bình thường. (Nếu bạn có một vài đầu vào bị vô hiệu hóa, bạn có thể muốn đặt từng loại vào một thùng chứa riêng, nếu chúng chưa được đặt theo cách đó - thêm <span>hoặc <div>nói, chỉ để giúp dễ dàng phân biệt đầu vào bị vô hiệu hóa nào đã được nhấp).

Nhược điểm là thủ thuật này không may không hoạt động đối với các trình duyệt cũ không hỗ trợ thuộc tính pointer-eventsCSS. (Nó nên hoạt động từ IE 11, FF v3.6, Chrome v4): caniuse.com/#search=pulum-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!

Tôi sẽ đề xuất một giải pháp thay thế - sử dụng CSS:

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

thay vì thuộc tính bị vô hiệu hóa. Sau đó, bạn có thể thêm các thuộc tính CSS của riêng mình để mô phỏng đầu vào bị vô hiệu hóa, nhưng với nhiều quyền kiểm soát hơn.

Thay vì disabled , bạn có thể xem xét sử dụng readonly. Với một số CSS bổ sung, bạn có thể định kiểu đầu vào để nó trông giống như một disabledtrường.

Thực sự có một vấn đề khác. Sự kiện changechỉ kích hoạt khi phần tử mất tập trung, không logic khi xem xét một disabledtrường. Có lẽ bạn đang đẩy dữ liệu vào trường này từ một cuộc gọi khác. Để thực hiện công việc này, bạn có thể sử dụng sự kiện 'liên kết'.

$('form').bind('change', 'input', function () {
    console.log('Do your thing.');
});

HOẶC làm điều này với jQuery và CSS!

$('input.disabled').attr('ignore','true').css({
    'pointer-events':'none',
     'color': 'gray'
});

Bằng cách này, bạn làm cho phần tử trông bị vô hiệu hóa và không có sự kiện con trỏ nào sẽ kích hoạt, tuy nhiên nó cho phép lan truyền và nếu được gửi, bạn có thể sử dụng thuộc tính 'bỏ qua' để bỏ qua nó.

Hôm nay chúng tôi có một vấn đề như thế này, nhưng chúng tôi không muốn thay đổi HTML. Vì vậy, chúng tôi đã sử dụng sự kiện mouseenter để đạt được điều đó

var doThingsOnClick = function() {
    // your click function here
};

$(document).on({
    'mouseenter': function () {
        $(this).removeAttr('disabled').bind('click', doThingsOnClick);
    },
    'mouseleave': function () {
        $(this).unbind('click', doThingsOnClick).attr('disabled', 'disabled');
    },
}, 'input.disabled');

Tôi tìm một giải pháp khác:

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

Lớp "bị vô hiệu hóa" bắt chước phần tử bị vô hiệu hóa bằng độ mờ:

<style type="text/css">
    input.disabled {
        opacity: 0.5;
    }
</style>

Và sau đó hủy bỏ sự kiện nếu phần tử bị vô hiệu hóa và xóa lớp:

$(document).on('click','input.disabled',function(event) {
    event.preventDefault();
    $(this).removeClass('disabled');
});

đề nghị ở đây có vẻ như là một ứng cử viên tốt cho câu hỏi này

Thực hiện nhấp chuột vào một yếu tố bị vô hiệu hóa? Javascript jQuery

jQuery('input#submit').click(function(e) {
    if ( something ) {        
        return false;
    } 
});