내 경험상 input type="text" onchange이벤트는 일반적으로 blur컨트롤 을 떠난 후에 만 발생합니다 .
컨텐츠가 변경 onchange될 때마다 브라우저가 강제로 트리거되도록하는 방법이 textfield있습니까? 그렇지 않다면 이것을“수동으로”추적하는 가장 우아한 방법은 무엇입니까?
onkey*필드를 마우스 오른쪽 단추로 클릭하고 붙여 넣기를 선택하면 키보드 입력없이 필드가 변경되므로 이벤트 사용 이 신뢰할 수 없습니다.
가 setTimeout유일한 방법은? .. 미운 :-)
답변:
최신 정보:
다른 답변 (2015)을 참조하십시오 .
원래 2009 답변 :
그렇다면 키 다운, onchange블러 및 붙여 넣기시 이벤트를 시작 하시겠습니까? 마술이다.
입력 할 때 변경 사항을 추적하려면을 사용하십시오 "onkeydown". 마우스로 붙여 넣기 작업을 트래핑해야하는 경우 "onpaste"( IE , FF3 ) 및 "oninput"( FF, Opera, Chrome, Safari 1 )을 사용하십시오.
1 Safari에서 고장 <textarea>났습니다. 사용 textInput하는 대신
onkeypress대신에 사용해야합니다 onkeydown. onkeydown키를 클릭하면 발생합니다. 사용자가 키를 누르고 있으면 첫 번째 문자에 대해 이벤트가 한 번만 발생합니다. onkeypress텍스트 필드에 문자가 추가 될 때마다 발생합니다.
onchange모든 행동에 불을 피우는 것은 마술이 아닙니다 . <input onchange="doSomething();" onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">대부분을 위해 충분히 잘할 것입니다.
$().on('change keydown paste input', function() {})
요즘 들어요 oninput. onchange요소에 초점을 잃을 필요없이 느낌이 듭니다 . HTML5입니다.
IE8 이하를 제외한 모든 사람 (모바일조차)이 지원합니다. IE의 경우 추가하십시오 onpropertychange. 나는 이것을 다음과 같이 사용한다 :
const source = document.getElementById('source');
const result = document.getElementById('result');
const inputHandler = function(e) {
result.innerHTML = e.target.value;
}
source.addEventListener('input', inputHandler);
source.addEventListener('propertychange', inputHandler); // for IE8
// Firefox/Edge18-/IE9+ don’t fire on <select><option>
// source.addEventListener('change', inputHandler); <input id="source">
<div id="result"></div>oninputIE9에서도 지원 은 부분적입니다 ( caniuse.com/#feat=input-event ).
innerText대신 사용 하는 것이 좋습니다.innerHTML
아래 코드는 Jquery 1.8.3에서 잘 작동합니다.
HTML : <input type="text" id="myId" />
자바 스크립트 / JQuery :
$("#myId").on('change keydown paste input', function(){
doSomething();
});keydown입력 값을 복제하고 제거하므로 필요하지 않습니다 .
자바 스크립트는 여기서 예측할 수없고 재미 있습니다.
onchange 텍스트 상자를 흐리게 할 때만 발생onkeyup& onkeypress항상 텍스트의 변화가 발생하지 않습니다onkeydown 텍스트 변경시 발생하지만 마우스 클릭으로 잘라 내기 및 붙여 넣기를 추적 할 수 없음onpaste& oncut키를 누르거나 마우스 오른쪽 버튼을 클릭해도 발생합니다.그래서, 텍스트 상자의 변화를 추적하기 위해, 우리는 필요 onkeydown, oncut및 onpaste. 이 이벤트의 콜백에서 텍스트 상자의 값을 확인하면 콜백 후에 값이 변경되어 업데이트 된 값을 얻지 못합니다. 따라서 이에 대한 해결책은 변경을 추적하기 위해 50 밀리 초 (또는 그 이하)의 시간 초과로 시간 초과 기능을 설정하는 것입니다.
이것은 더러운 해킹이지만 이것이 조사한 유일한 방법입니다.
다음은 예입니다. http://jsfiddle.net/2BfGC/12/
oninput그리고 textInput그 모든 브라우저에서 지원되지 않는,이에 대한 실제 솔루션이지만 이벤트입니다.
onkeyup및 onkeydown유사있는. 둘 다 Ctrl, Alt, Shift 및 Meta 키를 캡처 할 수 있습니다. 세 번째 글 머리 기호의 의미는 다음과 같습니다 onkeypress.
비슷한 요구 사항이 있습니다 (twitter 스타일 텍스트 필드). 사용 onkeyup및 onchange. onchange실제로 현장에서 초점을 잃은 동안 마우스 붙여 넣기 작업을 처리합니다.
[업데이트] HTML5 이상 oninput에서 위의 다른 답변에 설명 된대로 실시간 문자 수정 업데이트를 얻는 데 사용하십시오 .
oninput를 사용하는 것이 좋습니다. 그러나 구현했을 때 HTML5가 존재하지 않고 IE 8이있었습니다. (. 사용자에게 최신 정보를 제공하는 업데이트에 감사드립니다.
2018 년에는 input이벤트 를 사용하는 것이 좋습니다 .
-
WHATWG 사양에 설명 된대로 ( https://html.spec.whatwg.org/multipage/indices.html#event-input-input ) :
사용자가 값을 변경하면 컨트롤에서 시작됩니다 ( 변경 이벤트 참조 ).
-
사용 방법의 예는 다음과 같습니다.
<input type="text" oninput="handleValueChange()">Internet Explorer 만 사용하는 경우 다음을 사용할 수 있습니다.
<input type="text" id="myID" onpropertychange="TextChange(this)" />
<script type="text/javascript">
function TextChange(tBox) {
if(event.propertyName=='value') {
//your code here
}
}
</script>희망이 도움이됩니다.
거의 모든 해결책이 있지만 (모든 붙여 넣기 방법을 수정하지는 마십시오) 대부분은 다음과 같습니다.
텍스트 영역뿐만 아니라 입력에서도 작동합니다.
<input type="text" ... >
<textarea ... >...</textarea>이렇게하세요 :
<input type="text" ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >
<textarea ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >...</textarea>내가 말했듯이 모든 브라우저에서 이벤트를 붙여 넣는 모든 방법은 아니지만 최악의 이벤트는 전혀 발생하지 않지만 타이머는 사용하기가 끔찍합니다.
그러나 대부분의 붙여 넣기 방법은 키보드 및 / 또는 마우스로 수행되므로 일반적으로 붙여 넣기 후에 onkeyup 또는 onmouseup이 시작되고 키보드로 입력하면 onkeyup이 실행됩니다.
검사 코드가 시간이 많이 걸리지 않도록하십시오. 그렇지 않으면 사용자가 열악한 액세스를 얻습니다.
그렇습니다. 비결은 열쇠와 마우스를 발사하는 것입니다.
JQuery를 사용하여 다음 접근 방식을 판단하십시오.
HTML :
<input type="text" id="inputId" />자바 스크립트 (JQuery) :
$("#inputId").keyup(function(){
$("#inputId").blur();
$("#inputId").focus();
});
$("#inputId").change(function(){
//do whatever you need to do on actual change of the value of the input field
});각각을 추적하려면이 예제를 시도하고 그 전에 커서 깜박임 속도를 0으로 완전히 줄이십시오.
<body>
//try onkeydown,onkeyup,onkeypress
<input type="text" onkeypress="myFunction(this.value)">
<span> </span>
<script>
function myFunction(val) {
//alert(val);
var mySpan = document.getElementsByTagName("span")[0].innerHTML;
mySpan += val+"<br>";
document.getElementsByTagName("span")[0].innerHTML = mySpan;
}
</script>
</body>onblur : 종료시 이벤트 생성
onchange : 입력 텍스트에서 변경 한 경우 종료시 이벤트가 생성됩니다.
onkeydown : 키를 누를 때마다 이벤트가 생성됩니다 (키를 길게 누르고있는 경우에도)
onkeyup : 모든 키 릴리스에서 이벤트가 생성됩니다
onkeypress : onkeydown (또는 onkeyup)과 동일하지만 ctrl, backsace, alt에 대해서는 반응하지 않습니다.
2018 년 여기에 내가하는 일이 있습니다.
$(inputs).on('change keydown paste input propertychange click keyup blur',handler);이 접근법에서 결함을 지적 할 수 있다면 감사하겠습니다.
Robert Siemer addEventListener는 IE8에서 지원되지 않습니다.
"이전 버전의 IE는 독점적 인 EventTarget.attachEvent () 메소드를 지원했습니다." https://developer.mozilla.org/it/docs/Web/API/Element/addEventListener