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

비활성화 된 입력의 이벤트

해결법

1. ---

   1.장애인 요소는 마우스 이벤트를 발생하지 않습니다. 이벤트 핸들러가 컨테이너 요소에 배치 할 수 있도록 대부분의 브라우저는 DOM 트리까지 장애인 요소에서 이벤트 원래 전파됩니다. 그러나 파이어 폭스는 비활성화 된 요소를 클릭하면 그냥 전혀 아무것도하지 않는다,이 문제가 발생하지 않습니다.

   장애인 요소는 마우스 이벤트를 발생하지 않습니다. 이벤트 핸들러가 컨테이너 요소에 배치 할 수 있도록 대부분의 브라우저는 DOM 트리까지 장애인 요소에서 이벤트 원래 전파됩니다. 그러나 파이어 폭스는 비활성화 된 요소를 클릭하면 그냥 전혀 아무것도하지 않는다,이 문제가 발생하지 않습니다.

   나는 더 나은 솔루션을 생각할 수 있지만, 완벽한 크로스 브라우저 호환성을 위해, 당신은 장애인 입력 앞에 요소를 배치하고 해당 요소에 클릭을 잡을 수 있습니다. 여기에 내가 무엇을 의미하는지의 예입니다 :

   <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/ (소품 대신 ATTR와 jQuery를 1.7을 사용하도록 업데이트).

2. ---

   2.어쩌면 당신은 읽기 전용 필드를 만들고 모든 읽기 전용 필드를 비활성화 제출 수

   어쩌면 당신은 읽기 전용 필드를 만들고 모든 읽기 전용 필드를 비활성화 제출 수

   $(".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');
   })
   

3. ---

   3.그들에게 그들도 응답을하거나 그들을 어느 곳에서나 요소 나 용기의 하나에 이벤트 핸들러에 의해 포착 될 수 - 장애인 요소는 일부 브라우저에서 클릭을 "먹는".

   그들에게 그들도 응답을하거나 그들을 어느 곳에서나 요소 나 용기의 하나에 이벤트 핸들러에 의해 포착 될 수 - 장애인 요소는 일부 브라우저에서 클릭을 "먹는".

   (당신이 OP 같은 장애인 요소에 캡처 클릭에 사실을 필요로하는 경우에 수행) 이럴 간단하고 깨끗한 방법 "수정"이 페이지에 다음 CSS를 추가하는 단지입니다 :

   input[disabled] {pointer-events:none}
   

   이것은 일반적을 캡처 할 수 있습니다 부모 요소에 이르기까지 비활성화 된 입력 가을에 어떤 클릭을 할 것입니다. 여러 비활성화 입력이있는 경우 이미 그런 식으로 배치되지 않은 경우 (, 당신은 자신의 개별 용기에 각각 넣어 할 수 있습니다 - 추가 또는은

   말 - 단지를 만들기 위해 )를 클릭하고 사용할 수있는 입력 구별하기 쉬운.

   단점은이 트릭은 불행하게도 뜻이 아니라 포인터 이벤트 CSS 속성을 지원하지 않는 오래된 브라우저 작동한다는 것입니다. (그것은 IE 11, FF의 V3.6, 크롬 V4에서 작동합니다) : caniuse.com/#search=pointer-events를

   당신은 오래된 브라우저를 지원해야하는 경우에는 다른 답변 중 하나를 사용해야합니다!

4. ---

   4.: CSS를 사용 - 나는 대안을 건의 할 것

   : CSS를 사용 - 나는 대안을 건의 할 것

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

   대신 장애인 속성. 그런 다음 비활성화 된 입력을 시뮬레이션하기 위해 자신의 CSS 속성을 추가 할 수 있지만 더 제어 할 수 있습니다.

5. ---

   5.() {(기능 $ $ ( "입력 : 장애인") 가장 가까운 곳 ( "DIV") ((기능을 클릭) {.. . $ (이) .find ( "입력 : 장애인") ATTR ( "장애인", false)를 .focus (); }); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">

   () {(기능 $ $ ( "입력 : 장애인") 가장 가까운 곳 ( "DIV") ((기능을 클릭) {.. . $ (이) .find ( "입력 : 장애인") ATTR ( "장애인", false)를 .focus (); }); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">

6. ---

   6.대신 사용할 수 없습니다, 당신은 읽기 전용 사용을 고려할 수있다. 그것이 불가능 필드처럼 보이는, 그래서 몇 가지 여분의 CSS를 사용하면 입력 스타일을 지정할 수 있습니다.

   대신 사용할 수 없습니다, 당신은 읽기 전용 사용을 고려할 수있다. 그것이 불가능 필드처럼 보이는, 그래서 몇 가지 여분의 CSS를 사용하면 입력 스타일을 지정할 수 있습니다.

   또 다른 문제는 실제로 있습니다. 요소 푼다 초점을 때 이벤트 변화에만 사용할 필드를 고려 논리하지 않은, 트리거합니다. 아마 당신은 다른 통화에서이 필드에 데이터를 추진하고있다. 이 작품은 행사 '바인딩'를 사용할 수를 확인하십시오.

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

7. ---

   7.또는 jQuery를하고 CSS로 이렇게!

   또는 jQuery를하고 CSS로 이렇게!

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

   이 방법 당신은 요소의 모양을 사용할 수 있도록 더 포인터 이벤트가 발생하지 않습니다, 아직 전파를 허용하고 속성을 사용할 수 있습니다 제출 한 경우를 무시하는 '무시'.

8. ---

   8.우리는 오늘이 같은 문제가 있었다, 그러나 우리는 HTML 변경을 원하지 않았다. 그래서 우리는 것을 달성하기 위해 mouseenter 이벤트를 사용

   우리는 오늘이 같은 문제가 있었다, 그러나 우리는 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');
   

9. ---

   9.나는 다른 해결책을 찾을 수 :

   나는 다른 해결책을 찾을 수 :

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

   클래스 불투명도에 의해 "장애인"immitate를 비활성화 요소 :

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

   요소가 비활성화 및 제거 클래스의 경우 다음 이벤트를 취소 :

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

10. ---

    10.제안은 여기뿐만 아니라,이 질문에 대한 좋은 후보처럼 보인다

    제안은 여기뿐만 아니라,이 질문에 대한 좋은 후보처럼 보인다

    비활성화 된 요소에 클릭 이벤트를 수행? 자바 스크립트 jQuery를

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

from https://stackoverflow.com/questions/3100319/event-on-a-disabled-input by cc-by-sa and MIT license