입력 유형 = "텍스트"에서 입력시 변경 사항을 추적하는 가장 좋은 방법은 무엇입니까?

입력 유형 = "텍스트"에서 입력시 변경 사항을 추적하는 가장 좋은 방법은 무엇입니까?

---

내 경험상 input type="text" onchange이벤트는 일반적으로 blur컨트롤 을 떠난 후에 만 ​​발생합니다 .

컨텐츠가 변경 onchange될 때마다 브라우저가 강제로 트리거되도록하는 방법이 textfield있습니까? 그렇지 않다면 이것을“수동으로”추적하는 가장 우아한 방법은 무엇입니까?

onkey*필드를 마우스 오른쪽 단추로 클릭하고 붙여 넣기를 선택하면 키보드 입력없이 필드가 변경되므로 이벤트 사용 이 신뢰할 수 없습니다.

가 setTimeout유일한 방법은? .. 미운 :-)

---

최신 정보:

다른 답변 (2015)을 참조하십시오 .

---

원래 2009 답변 :

그렇다면 키 다운, onchange블러 및 붙여 넣기시 이벤트를 시작 하시겠습니까? 마술이다.

입력 할 때 변경 사항을 추적하려면을 사용하십시오 "onkeydown". 마우스로 붙여 넣기 작업을 트래핑해야하는 경우 "onpaste"( IE , FF3 ) 및 "oninput"( FF, Opera, Chrome, Safari ¹ )을 사용하십시오.

¹ _{Safari에서 고장 <textarea>났습니다. 사용 textInput하는 대신}

---

요즘 들어요 oninput. onchange요소에 초점을 잃을 필요없이 느낌이 듭니다 . HTML5입니다.

IE8 이하를 제외한 모든 사람 (모바일조차)이 지원합니다. IE의 경우 추가하십시오 onpropertychange. 나는 이것을 다음과 같이 사용한다 :

const $source = document.querySelector('#source');
const $result = document.querySelector('#result');

const typeHandler = function(e) {
  $result.innerHTML = e.target.value;
}

$source.addEventListener('input', typeHandler) // register for oninput
$source.addEventListener('propertychange', typeHandler) // for IE8
// $source.addEventListener('change', typeHandler) // fallback for Firefox for <select><option>, for <input> oninput is enough

<input id="source" />
<div id="result"></div>

---

아래 코드는 Jquery 1.8.3에서 잘 작동합니다.

HTML : <input type="text" id="myId" />

자바 스크립트 / JQuery :

$("#myId").on('change keydown paste input', function(){
      doSomething();
});

---

자바 스크립트는 여기서 예측할 수없고 재미 있습니다.

• onchange 텍스트 상자를 흐리게 할 때만 발생
• onkeyup& onkeypress항상 텍스트의 변화가 발생하지 않습니다
• onkeydown 텍스트 변경시 발생하지만 마우스 클릭으로 잘라 내기 및 붙여 넣기를 추적 할 수 없음
• onpaste& oncut키를 누르거나 마우스 오른쪽 버튼을 클릭해도 발생합니다.

그래서, 텍스트 상자의 변화를 추적하기 위해, 우리는 필요 onkeydown, oncut및 onpaste. 이 이벤트의 콜백에서 텍스트 상자의 값을 확인하면 콜백 후에 값이 변경되어 업데이트 된 값을 얻지 못합니다. 따라서 이에 대한 해결책은 변경을 추적하기 위해 시간 제한을 50 밀리 초 (또는 더 적을 수 있음)로 설정하는 것입니다.

이것은 더러운 해킹이지만 이것이 조사한 유일한 방법입니다.

다음은 예입니다. http://jsfiddle.net/2BfGC/12/

---

onkeyup예를 들어 입력 한 후 발생 t합니다. 손가락을 들어 올리면 누르면 동작이 발생하지만 keydown캐릭터는 숫자를 입력하기 전에 동작이 발생합니다.t

이것이 누군가에게 도움이되기를 바랍니다.

그래서 onkeyup더 나은 당신이 지금 입력 한 내용 보낼 때입니다.

---

비슷한 요구 사항이 있습니다 (twitter 스타일 텍스트 필드). 사용 onkeyup및 onchange. onchange실제로 현장에서 초점을 잃는 동안 마우스 붙여 넣기 작업을 처리합니다.

[업데이트] HTML5 이상 oninput에서 위의 다른 답변에 설명 된대로 실시간 문자 수정 업데이트를 얻는 데 사용하십시오 .

---

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>

희망이 도움이됩니다.

---

2018 년에는 input이벤트 를 사용하는 것이 좋습니다 .

-

WHATWG 사양에 설명 된대로 ( https://html.spec.whatwg.org/multipage/indices.html#event-input-input ) :

사용자가 값을 변경하면 컨트롤에서 시작됩니다 ( 변경 이벤트 참조 ).

-

사용 방법의 예는 다음과 같습니다.

<input type="text" oninput="handleValueChange()">

---

거의 모든 해결책이 있지만 (모든 붙여 넣기 방법을 수정하지는 마십시오) 대부분은 다음과 같습니다.

텍스트 영역뿐만 아니라 입력에서도 작동합니다.

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

---

"입력"이 나를 위해 일했습니다.

var searchBar  = document.getElementById("searchBar");
searchBar.addEventListener("input", PredictSearch, false);

---

당신은 사용할 수 있습니다 keydown, keyup그리고 keypress뿐만 아니라 이벤트를.

---

각각을 추적하려면이 예제를 시도하고 그 전에 커서 깜박임 속도를 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

참고 URL : https://stackoverflow.com/questions/574941/best-way-to-track-onchange-as-you-type-in-input-type-text