keydown 이벤트의 preventDefault() onchange 이벤트가 트리거되지 않음

Question

프로그래밍 방식으로 값이 변경된 keydown 또는 keypress 이벤트에서 호출 된 preventDefault()은 변경을 고려하지 않고 입력 텍스트 종료시 onchange 이벤트를 트리거하지 않습니다.

예 코드 (입력 텍스트를 떠나)의 onchange를 호출 자리 만 문자 'A'및 입력을 떠나 다른 시간 후

$('#textbox1').on('change', function() { 
    alert('onchange called'); 
}); 

$('#textbox1').on('keydown', function(event) { 
    if(event.key=='a') { 

     $(this).val('A'); 
     //event.target.value = 'A'; 
     event.preventDefault(); 
    } 
}); 

.

바이올린 코드 : http://jsfiddle.net/gxx5744s/1/

어떤 값이 변경되었는지 확인하기 위해 onchange를 이벤트를 사용합니까? 한 쌍의 이전 값/새 값 변수? 부울? 상호 작용이 가능합니까?

아마도 Keydown 이벤트 기본값이 또한 이것을 수행합니다. the docs에서

Answer 1

"더러운"개정 된 솔루션 조금 @Kaddath의 아이디어를 복용하지만 작업이 될 수 . 나는별로 좋아하지 않지만 그 순간 나는 그것을 더 잘 찾지 못했다. 바이올린에

$('#textbox1').on('change', function() { 
 
\t alert('onchange called'); 
 
}); 
 
    
 
$('#textbox1').on('keydown', function(event) {  
 
    var oldValue = event.target.value; 
 
    
 
    if (event.keyCode == 46) { //DELETE 
 
    \t event.target.value = "" 
 
    } else 
 
\t \t event.target.value = event.key + event.target.value; 
 
    
 
    event.preventDefault(); 
 

 
    if (event.target.valueOnFocus === undefined) { 
 
    // set a new property on the input element 
 
    event.target.valueOnFocus = oldValue; 
 
    
 
    $(event.target).on('focus', function(event) { 
 
     // From the second time that enter on the input element, 
 
     // update the new property 
 
     event.target.valueOnFocus = event.target.value; 
 
    }); 
 
    
 
    $(event.target).on('blur', function(event) { 
 
     if (event.target.value !== event.target.valueOnFocus) 
 
     $(event.target).trigger('change'); 
 
    \t }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="textbox1" />

: 나는`트리거 같아요 http://jsfiddle.net/gxx5744s/3/

Answer 2

:

형태 소자의 종류에 따라 변경되는 상기 방법은 사용자가 요소와 상호 작용하는 다른 순간 변경 이벤트가 발생 :

• 값이으로 변경된 후에 요소가 포커스를 잃지 만 을 커밋하지 않은 경우 (예 : <textarea> 또는값을 편집 한 후).

귀하의 예에서는 마찬가지입니다.

값을 변경하고 초점을 조정 해보십시오. 경고가 표시됩니다.

Answer 3

onchange 이벤트는 일반적으로 텍스트 입력 값이 포커스를 벗어날 때 변경됩니다. 여기에서도 마찬가지입니다.하지만 preventDefault가 지정된 함수가 호출 될 때 발생하지는 않습니다 , 그것은 예상되는 행동이 아니다! !!

이 실제로 취소 할 수없는 onchange를 이벤트의 호출되는를 keyDown 이벤트의 기본 동작을 방지해야하는로 preventDefault ... 나는이 문제를 추측

다른 무언가이다 :

값의 기본 설정은 가정 ... 제출 단지 값이 아니라 DOM 요소를 변경되기 때문에 어쩌면

$(this).val('A');

와 JQuery와 방법과 다를 것 같다 당신은

$(this).attr('Value','A');

이 예상 다르게 동작으로이 줄을 변경!

흥미로운 것은 기본 동작은 속성 값을 설정하지 않으며 두 방법 모두 디스플레이를 변경하지만 차이가 있어야한다는 것입니다.

편집 : 나에게 솔루션 폼 @Kaddath이 가장 적합한 것 같다 :

var change = false; 
 

 
$('#textbox1').on('change', function() { 
 
    alert('onchange called'); 
 
}); 
 

 
$('#textbox1').on('blur', function() { 
 
    if (change) { 
 
    alert('"onchange" called too'); 
 
    change = false; 
 
    } 
 
}); 
 

 
$('#textbox1').on('keydown', function(event) { 
 
    if (event.key == 'a') { 
 
    $(this).val('A'); 
 
    change = true; 
 
    event.preventDefault(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="textbox1" />