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

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

Safari가 텍스트 입력 필드에서 "onchange"이벤트를 발생시키지 않는 문제가 발생했습니다. jQuery 1.7.2 "변경"이벤트를 사용했지만 작동하지 않았습니다. 결국 ZURB의 textchange 이벤트를 사용하게되었습니다. 마우스 이벤트와 함께 작동하며 필드를 떠나지 않고도 실행할 수 있습니다.
http://www.zurb.com/playground/jquery-text-change-custom-event

$('.inputClassToBind').bind('textchange', function (event, previousText) {
    alert($(this).attr('id'));
});

IMO가 중요하다는 몇 가지 의견 :

• USER 액션이 ENTER 또는 blur가 대기 할 때까지 '변경'이벤트를 생성하지 않는 입력 요소 가 올바른 동작 입니다.

• 사용하려는 이벤트는 "input"( " oninput ")입니다. 다음은 두 가지의 차이점을 잘 보여줍니다. https://javascript.info/events-change-input

• 두 이벤트는 두 가지 다른 사용자 동작 / 순간을 나타냅니다 ( "입력"이벤트는 사용자가 선택 목록 옵션을 작성하거나 탐색하고 있지만 여전히 변경 사항을 확인하지 않음을 의미합니다. "변경"은 사용자가 값을 변경했음을 의미합니다 (입력 또는 흐리게 표시 우리의)

• 여기에 권장되는 많은 주요 이벤트를 수신하는 것은이 경우에 좋지 않습니다. (입력에서 ENTER의 기본 동작을 수정하는 사람들처럼) ...

• jQuery는 이와 관련이 없습니다. 이것은 모두 HTML 표준입니다.

• 이것이 올바른 동작 인 이유를 이해하는 데 문제가있는 경우 실험적으로 마우스 / 패드없이 키보드 만 사용하는 텍스트 편집기 나 브라우저를 사용하는 것이 도움이 될 수 있습니다.

내 2 센트.

onkeyup이 나를 위해 일했습니다. back space를 누를 때 onkeypress가 트리거되지 않습니다.

onchange(event)와 함께 사용 하는 것이 좋습니다 <select>. 함께 <input>하면 이벤트 이하로 사용할 수 있습니다 :

- onkeyup(event)
- onkeydown(event)
- onkeypress(event)

시도해보십시오 onpropertychange. IE에서만 작동합니다.