[javascript] html <input type =“text”/> onchange 이벤트가 작동하지 않음

Program / 글쓴이

실험을하려고합니다. 내가 원하는 것은 사용자가 텍스트 상자에 무언가를 입력 할 때마다 대화 상자에 표시된다는 것입니다. 내가 사용 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);
}