2017-04-19 1 views
0

JavaScript로 동적으로 업데이트되는 입력 양식이 있습니다. d3을 사용하여이 입력을 조작 할 때마다 함수를 실행하는 이벤트 리스너를 만들고 싶습니다.양식 입력 이벤트 수신기

현재 입력란을 수동으로 변경하면 실행되지만 JavaScript를 사용하여 업데이트하는 경우 실행되지 않습니다. .on("change",....on("input",...을 사용해 보았습니다.

<!DOCTYPE html> 
<meta charset="utf-8"> 

<input value="0" id="input1"> 
<button onclick="clickFunc();">Click Me</button> 


<script src="http://d3js.org/d3.v3.min.js"></script> 
<script> 

d3.select("#input1").on("input", function() { 
// not printing when updated by javascript 
    console.log('value changed'); 
}); 

function clickFunc() { 
    document.getElementById('input1').value = document.getElementById('input1').value + 1; 
} 

</script> 

답변

0

당신은 관찰 MutationObserver 창 클래스를 사용할 필요가 입력의 JS에 의해 트리거 된 변경.

예를 들어 단순히 입력 노드 value을 설정하면 MutationObserver이 트리거되지 않습니다. 변경 내용을 확인하려면 setAttribute(value, "value")을 호출해야 MutationObserver입니다.

가 여기이 만든 작업 예제 : 물론 https://codepen.io/Inlesco/pen/rmxdpz

, 이것은 바닐라 JS 솔루션입니다. 바닐라를 염려하지 않고 jQuery을 사용하는 것이 바람직하다고 생각하면 jQuery 응답을 사용할 수 있습니다. Detect all changes to a <input type="text"> (immediately) using JQuery

그래도 작동 여부를 보장 할 수는 없지만. 테스트하지 않았어.

0

당신이 input 요소의 oninput="" 속성과 기능을 실행할 수 있습니다 여기에

내가 얻으려고 노력하고있는 기능의 예입니다.

$("myobject").oninput = function(){myScript}; 

또는 당신은 더 나은이 하나 있습니다 :

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

JS , 당신은 또한 사용할 수 있습니다

$("myobject").addEventListener("input", myScript); 
관련 문제