비활성화된 입력에 대한 이벤트

비활성화된 입력에 대한 이벤트

장애인이 된 것 같습니다.<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/ (jQuery 1.7을 사용하는 경우 필요 없음)prop대신attr).

비활성화된 요소는 일부 브라우저에서 클릭을 "먹음"으로 하며, 이러한 요소에 응답하지 않으며 요소 또는 컨테이너의 이벤트 핸들러에 의해 캡처될 수 없습니다.

IMHO에서 이것을 「수정」하는 가장 간단하고 깨끗한 방법(실제로 OP와 같이 비활성화된 요소의 클릭을 캡처할 필요가 있는 경우)은, 다음의 CSS를 페이지에 추가하는 것 뿐입니다.

input[disabled] {pointer-events:none}

이렇게 하면 비활성화된 입력에 대한 클릭이 부모 요소에 전달되어 정상적으로 캡처할 수 있습니다. (비활성화된 입력이 여러 개 있는 경우 각 입력이 아직 배치되지 않은 경우 개별 컨테이너에 저장할 수 있습니다. 추가 정보<span>또는<div>, say - 어떤 비활성화된 입력이 클릭되었는지 쉽게 구분할 수 있도록 합니다).

---

단점은 유감스럽게도 이 트릭은 이 기능을 지원하지 않는 오래된 브라우저에서는 작동하지 않습니다.pointer-eventsCSS 속성(IE 11, FF v3.6, Chrome v4에서 동작해야 함): caniuse.com/ #search=setc-displays

오래된 브라우저를 지원하려면 다른 답변 중 하나를 사용해야 합니다.

필드를 읽기 전용으로 하고 제출 시 모든 읽기 전용 필드를 비활성화 시킬 수 있습니다.

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

입력(+스크립트)은

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

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

실제 예:

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

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

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

디세이블 애트리뷰트 대신.그 후, 독자적인 CSS 어트리뷰트를 추가하고, 디세이블이 된 입력을 시뮬레이트 할 수 있습니다.단, 제어력이 향상됩니다.

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

disabled , , , , , , 을 하는 것을 해 볼 수 .readonly CSS를 을 할 수.「 「 CSS 」 「 」 「 」 「 CSS 」 。disabledsyslog.syslog.syslog.

사실 다른 문제가 있어요. '''change포커스를 만 트리거합니다.이 아닙니다.이것은, 「포커스」를 고려한 것이 아닙니다.이것은 로직이 아닙니다.disabled필드. 다른 콜에서 이 필드에 데이터를 푸시하고 있을 수 있습니다.이 작업을 수행하려면 'bind' 이벤트를 사용할 수 있습니다.

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

또는 jQuery와 CSS를 사용하여 이 작업을 수행합니다.

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

이렇게 하면 요소를 사용할 수 없는 것처럼 보이게 하고 포인터 이벤트가 발생하지 않지만 전파가 허용되므로 전송되는 경우 '무시' 속성을 사용하여 요소를 무시할 수 있습니다.

우리는 오늘 이런 문제가 있었지만 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');

나는 Andy E와 매우 유사한 무언가를 했다. 다만 나는 주변 태그를 사용했다.하지만 '이름'이 필요해서 'href'가 없는 태그로 바꿨습니다.

닮지요.disabled와 Attribute의 조합을 readonly:

Faux-Disabled: <input type="text" value="1" readonly="1" style="background-color:#F6F6F6;"><br>

Real-Disabled: <input type="text" disabled="true" value="1"></input>

주의: 이것은 일반적인 동작은 아닙니다.disabled <form>그러면 서버에서 필드를 볼 수 없게 됩니다.이는 서버 측에서 중요하지 않은 필드를 사용 불가능으로 설정하려는 경우에 한합니다.

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

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

여기서의 제안도 이 질문에 대한 좋은 후보처럼 보인다.

비활성화된 요소에서 클릭 이벤트를 수행하시겠습니까?Javascript jQuery

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

언급URL : https://stackoverflow.com/questions/3100319/event-on-a-disabled-input