[javascript] 비활성화 된 입력 이벤트

비활성화 된 요소는 마우스 이벤트를 발생시키지 않습니다. 대부분의 브라우저는 비활성화 된 요소에서 시작된 이벤트를 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');
})

input[disabled] {pointer-events:none}

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

$(function() {

  $("input:disabled").closest("div").click(function() {
    $(this).find("input:disabled").attr("disabled", false).focus();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div>
  <input type="text" disabled />
</div>

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

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