실험을하려고합니다. 내가 원하는 것은 사용자가 텍스트 상자에 무언가를 입력 할 때마다 대화 상자에 표시된다는 것입니다. 내가 사용 onchange
이 일어날 수 있도록 이벤트 속성을하지만 일을하지 않습니다. 작동하려면 제출 버튼을 눌러야합니다. 나는 AJAX에 대해 읽었고 이것에 대해 배우려고 생각하고 있습니다. 작동하려면 AJAX가 여전히 필요합니까 아니면 간단한 JavaScript로 충분합니까? 도와주세요.
index.php
<script type="text/javascript" src="javascript.js"> </script>
<form action="index.php" method="get">
Integer 1: <input type="text" id="num1" name="num1" onchange="checkInput('num1');" /> <br />
Integer 2: <input type="text" id="num2" name="num2" onchange="checkInput('num2');" /> <br />
<input type="submit" value="Compute" />
</form>
javascript.js
function checkInput(textbox) {
var textInput = document.getElementById(textbox).value;
alert(textInput);
}
답변
onchange
컨트롤이 흐려질 때만 트리거됩니다. onkeypress
대신 시도하십시오 .
답변
.on('input'...
jQuery 1.7 이상에서 입력 (붙여 넣기, 키업 등)에 대한 모든 변경 사항을 모니터링하는 데 사용 합니다.
정적 및 동적 입력의 경우 :
$(document).on('input', '.my-class', function(){
alert('Input changed');
});
정적 입력에만 해당 :
$('.my-class').on('input', function(){
alert('Input changed');
});
정적 / 동적 예제가있는 JSFiddle : https://jsfiddle.net/op0zqrgy/7/
답변
마우스 클릭을 사용하여 입력 필드의 내용을 변경할 수 있기 때문에 키 입력을 확인하는 것은 부분적인 해결책 일뿐입니다. 텍스트 필드를 마우스 오른쪽 버튼으로 클릭하면 키 입력없이 값을 변경하는 데 사용할 수있는 잘라 내기 및 붙여 넣기 옵션이 있습니다. 마찬가지로 자동 완성이 활성화 된 경우 필드를 마우스 왼쪽 버튼으로 클릭하고 이전에 입력 한 텍스트의 드롭 다운을 가져올 수 있으며 마우스 클릭을 사용하여 선택 항목 중에서 선택할 수 있습니다. 키 입력 트랩은 이러한 유형의 변경 사항을 감지하지 못합니다.
안타깝게도 최소한 내가 아는 한 변경 사항을 즉시보고하는 “onchange”이벤트는 없습니다. 그러나 모든 경우에 작동하는 솔루션이 있습니다. setInterval ()을 사용하여 타이밍 이벤트를 설정합니다.
입력 필드에 “city”라는 ID와 이름이 있다고 가정 해 보겠습니다.
<input type="text" name="city" id="city" />
“city”라는 전역 변수가 있습니다.
var city = "";
페이지 초기화에 다음을 추가하십시오.
setInterval(lookForCityChange, 100);
그런 다음 lookForCityChange () 함수를 정의하십시오.
function lookForCityChange()
{
var newCity = document.getElementById("city").value;
if (newCity != city) {
city = newCity;
doSomething(city); // do whatever you need to do
}
}
이 예에서 “city”값은 100 밀리 초마다 확인되며 필요에 따라 조정할 수 있습니다. 원한다면 lookForCityChange ()를 정의하는 대신 익명 함수를 사용하십시오. 코드 또는 브라우저가 입력 필드에 대한 초기 값을 제공 할 수 있으므로 사용자가 작업을 수행하기 전에 “변경”에 대한 알림을받을 수 있습니다. 필요에 따라 코드를 조정하십시오.
10 분의 1 초마다 발생하는 타이밍 이벤트의 아이디어가 부적절 해 보이면 입력 필드가 포커스를받을 때 타이머를 시작하고 흐림시 종료 (clearInterval () 사용) 할 수 있습니다. 포커스를받지 않고 입력 필드의 값을 변경할 수 없다고 생각하므로 이러한 방식으로 타이머를 켜고 끄는 것이 안전 할 것입니다.
답변
HTML5 는 oninput
모든 직접적인 변경 사항을 포착 하는 이벤트를 정의합니다 . 그것은 나를 위해 작동합니다.
답변
onchange
입력 요소에 대한 변경 사항이 사용자에 의해 커밋 된 경우에만 발생하며, 대부분의 경우 요소가 포커스를 잃을 때입니다.
요소 값이 변경 될 때마다 함수가 실행되도록하려면 oninput
이벤트를 사용해야합니다 . 값이 사용자의 마우스 (예 : 붙여 넣거나 자동 채우기 등)로 변경 될 수 있으므로 키 업 / 다운 이벤트보다 낫습니다.
답변
“onchange”대신 다음 이벤트 사용
- onkeyup(event)
- onkeydown(event)
- onkeypress(event)
답변
첫째, ‘작동하지 않는’것은 무엇입니까? 경고가 보이지 않습니까?
또한 귀하의 코드는 이렇게 단순화 될 수 있습니다.
<input type="text" id="num1" name="num1" onkeydown="checkInput(this);" /> <br />
function checkInput(obj) {
alert(obj.value);
}