입력 유형="텍스트"에서 원하는 대로 변경 사항을 추적하는 가장 좋은 방법은 무엇입니까?
경험으로는 제제 in in in in in in in in ininput type="text" onchange는 보통 합니다.blur를 선택합니다를 선택합니다.
로 트리거하는 방법이 있나요?onchangetextfield 이 '수동을 추적하는 요?그렇지 않다면, 이 "수동"을 추적하는 가장 우아한 방법은 무엇입니까?
「」를 사용합니다.onkey*필드를 마우스 오른쪽 버튼으로 클릭하고 붙여넣기를 선택하면 키보드 입력 없이 필드가 변경되므로 이벤트는 신뢰할 수 없습니다.
이는?setTimeout못생겼다:-)-)-)-)--)
요즘 들어봐요. 그 요소에 집중을 안 해도 되는 것 같아요.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>업데이트:
2009년 오리지널 답변:
아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아...onchange키 다운, 흐림 및 붙여넣기 시 발생하는 이벤트마술이야.
하려면 " " 를 합니다."onkeydown" 할 는, 을 해 주세요."onpaste"(IE, FF3) 및"oninput"(FF, 오페라, 크롬, 사파리1).
1 ★★★★★★★★★★★★★★★★:<textarea>Safari에서.대신 사용
아래 코드는 Jquery 1.8.3에서 정상적으로 동작합니다.
: HTML :<input type="text" id="myId" />
Javascript/JQuery:
$("#myId").on('change keydown paste input', function(){
doSomething();
});
Javascript는 여기서 예측할 수 없고 재미있다.
onchange했을 합니다.onkeyup&onkeypress시 것은 .onkeydown텍스트 변경 시 발생(단, 마우스 클릭으로는 잘라내기 & 붙여넣기를 추적할 수 없음)onpaste&oncut키를 누르거나 마우스 오른쪽 버튼을 클릭해도 발생합니다.
텍스트 박스의 박스의 변화를 추적해야 합니다.onkeydown,oncut ★★★★★★★★★★★★★★★★★」onpaste이러한 이벤트의 콜백에서 텍스트 상자의 값을 체크하면 콜백 후 값이 변경되므로 업데이트된 값이 표시되지 않습니다.따라서 이를 위한 해결책은 타임아웃 함수를 50밀리초(또는 그 이하)로 설정하여 변경을 추적하는 것입니다.
이것은 더러운 해킹이지만 내가 조사한 바로는 이 방법밖에 없다.
여기 예가 있습니다.http://jsfiddle.net/2BfGC/12/
에는 2018년형 모델을 것 .input
-
WHATWG 사양에서 설명한 바와 같이 (https://html.spec.whatwg.org/multipage/indices.html#event-input-input):
사용자가 값을 변경할 때 컨트롤 시 호출됩니다(변경 이벤트 참조).
-
다음은 사용 방법의 예입니다.
<input type="text" oninput="handleValueChange()">
onkeyup, 입력 후에 합니다.t내가 손가락을 들면 동작은 일어나지만keydown액션은 캐릭터를 디지팅하기 전에 발생합니다.t
이게 누군가에게 도움이 됐으면 좋겠어요.
그렇게onkeyup지금 입력한 것을 송신하는 경우에 적합합니다.
비슷한 요건(트위터 스타일의 텍스트필드)이 있었습니다.사용했다onkeyup그리고.onchange.onchange실제로 현장에서 포커스를 잃은 동안 마우스 붙여넣기 작업을 처리합니다.
[갱신] HTML5 이후에서는oninput위의 다른 답변에서 설명한 바와 같이 실시간 문자 수정 업데이트를 받을 수 있습니다.
사용하다oninput대신onchange.
index.displaces를 표시합니다.
<html>
<head>
<title>title here</title>
<script src="index.js"></script>
</head>
<body>
<input oninput="onclickhandler(this)"></input>
</body>
</html>
script.discripts.discripts: 스크립트
function onclickhandler(e) {
console.log(e.value);
}
JQuery를 사용하여 다음 접근 방식을 판단하십시오.
HTML:
<input type="text" id="inputId" />
Javascript(JQuery):
$("#inputId").keyup(function() {
$(this).blur();
$(this).focus();
});
$("#inputId").change(function() {
// Do whatever you need to do on actual change of the value of the input field
});
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>
말했듯이 모든 브라우저에서 이벤트를 붙여넣는 모든 방법은 아닙니다.최악의 경우엔 어떤 이벤트도 발생시키지 않지만 타이머는 그런 용도로 사용되는 것이 끔찍하다.
그러나 대부분의 붙여넣기 방법은 키보드나 마우스로 이루어지기 때문에 보통 붙여넣기 후에 온키업이나 온마우스업이 실행되며, 또한 키보드로 입력할 때 온키업이 실행됩니다.
체크코드에 시간이 오래 걸리지 않는지 확인합니다.그렇지 않으면 사용자에게 나쁜 인상을 줍니다.
네, 열쇠와 마우스로 쏘는 게 요령이에요하지만 둘 다 해고될 수 있으니 명심해!!!
"input"은 내게 효과가 있었다.
var searchBar = document.getElementById("searchBar");
searchBar.addEventListener("input", PredictSearch, false);
각 항목을 추적하려면 이 예시와 그 전에 커서 깜박임 속도를 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 : 임의의 키릴리즈에서 이벤트가 생성됩니다.
onkey press: onkeydown(또는 onkeyup)과 동일하지만 ctrl, backsace, alt other에 대해 반응하지 않음
2018년, 저는 이렇게 하고 있습니다.
$(inputs).on('change keydown paste input propertychange click keyup blur',handler);
이 어프로치의 결점을 지적해 주시면 감사하겠습니다.
를 사용할 수 있습니다.keydown,keyup그리고.keypress이벤트도 있습니다.
방법 1: 이벤트청취자 추가input:
element.addEventListener("input", myFunction);
방법 2: 정의oninput속성(JavaScript 사용):
element.oninput = function()
{
myFunction();
};
방법 3: 정의oninputHTML을 사용한 속성:
<input type="text" oninput="myFunction();">
언급URL : https://stackoverflow.com/questions/574941/best-way-to-track-onchange-as-you-type-in-input-type-text
'it-source' 카테고리의 다른 글
| PowerMockito 모의 단일 정적 메서드 및 반환 객체 (0) | 2022.10.30 |
|---|---|
| Vuex: 디스패치에서는 약속을 반환하여 체인으로 묶을 수 있습니까? (0) | 2022.10.30 |
| Visual Studio 코드 PHP Intlephense가 계속 필요하지 않은 오류를 표시함 (0) | 2022.10.30 |
| null은 객체입니까? (0) | 2022.10.30 |
| Synology NAS의 속편을 통해 Mariadb에 연결 (0) | 2022.10.30 |