비활성화 된 입력 이벤트

분명히 장애인 <input>은 어떤 이벤트로도 처리되지 않습니다.

이 문제를 해결하는 방법이 있습니까?

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

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

여기서 입력을 클릭하여 활성화해야합니다. 그러나 활성화하지 않으면 입력이 게시되지 않아야합니다.

비활성화 된 요소는 마우스 이벤트를 발생시키지 않습니다. 대부분의 브라우저는 비활성화 된 요소에서 시작된 이벤트를 DOM 트리까지 전파하므로 이벤트 핸들러는 컨테이너 요소에 배치 될 수 있습니다. 그러나 Firefox는이 동작을 나타내지 않으며 비활성화 된 요소를 클릭 할 때 아무 것도 수행하지 않습니다.

더 나은 솔루션을 생각할 수는 없지만 완벽한 크로스 브라우저 호환성을 위해 비활성화 된 입력 앞에 요소를 배치하고 해당 요소를 클릭 할 수 있습니다. 다음은 내가 의미하는 바의 예입니다.

<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();
});​

예 : http://jsfiddle.net/RXqAm/170/ ( prop대신 jQuery 1.7을 사용하도록 업데이트 attr)

어쩌면 필드를 읽기 전용으로 만들 수 있고 제출시 모든 읽기 전용 필드를 비활성화 할 수 있습니다

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

입력 (+ 스크립트)은

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

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

비활성화 된 요소는 일부 브라우저에서 클릭을 "먹습니다"-응답하지 않으며 요소 나 컨테이너의 어느 곳에서나 이벤트 처리기에서 캡처 할 수 없습니다.

IMHO가 이것을 간단하게 수정하는 가장 간단하고 깨끗한 방법 (실제로 OP처럼 비활성화 된 요소에 대한 클릭을 캡처해야하는 경우)은 다음 CSS를 페이지에 추가하는 것입니다.

input[disabled] {pointer-events:none}

비활성화 된 입력을 클릭하면 부모 요소로 넘어 가서 정상적으로 캡처 할 수 있습니다. (여러 개의 비활성화 된 입력이있는 경우, 각각이 별도의 <span>또는 <div>, 예를 들어-비활성화 된 입력을 쉽게 구별 할 수 있도록 그러한 방식으로 배치되지 않은 경우 각 컨테이너를 개별 컨테이너에 넣기를 원할 수 있습니다) 클릭).

단점은 불행히도이 속임수는 pointer-eventsCSS 속성을 지원하지 않는 구형 브라우저에서는 작동하지 않는다는 것 입니다. (IE 11, FF v3.6, Chrome v4에서 작동해야 함) : caniuse.com/#search=pointer-events

구형 브라우저를 지원해야하는 경우 다른 답변 중 하나를 사용해야합니다!

CSS를 사용하는 대안을 제안합니다.

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

disabled 속성 대신 그런 다음 자체 CSS 속성을 추가하여 비활성화 된 입력을 시뮬레이트 할 수 있지만 더 많은 제어가 가능합니다.

대신을 disabled사용하는 것을 고려할 수 readonly있습니다. 몇 가지 추가 CSS를 사용하면 disabled필드 처럼 보이도록 입력 스타일을 지정할 수 있습니다 .

실제로 다른 문제가 있습니다. change요소가 포커스를 잃을 때만 이벤트가 트리거되는데, 이는 disabled필드를 고려하는 논리가 아닙니다 . 아마도 다른 호출에서이 필드로 데이터를 푸시하고있을 것입니다. 이 작업을 수행하려면 '바인드'이벤트를 사용할 수 있습니다.

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

또는 jQuery와 CSS 로이 작업을 수행하십시오!

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

이렇게하면 요소를 비활성화하고 포인터 이벤트가 발생하지 않지만 전파가 가능하며 제출되면 'ignore'속성을 사용하여 무시할 수 있습니다.

우리는 오늘 이와 같은 문제를 겪었지만 HTML을 바꾸고 싶지 않았습니다. 우리는 mouseenter 이벤트를 사용 하여

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');

다른 해결책을 찾았습니다.

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

클래스 "disabled"는 비활성화 된 요소를 불투명도로 모방합니다.

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

요소가 비활성화되어 있으면 이벤트를 취소하고 클래스를 제거하십시오.

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

여기 제안은이 질문에 대한 좋은 후보처럼 보입니다.

비활성화 된 요소에서 클릭 이벤트를 수행하고 있습니까? 자바 스크립트 jQuery

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