編集可能な​​タグの値をonchange関数で取得しますか？

Question

JavaScriptで編集可能に設定されたタグの値を取得しようとしています。ここで

<td class="cent" contenteditable='true' id="value_per_visit" 
onchange="myFunction()"> -- </td> 

下記のコードでは、私のjavascriptのコード

<script type="text/javascript"> 
function myFunction() { 
    var x = document.getElementById("value_per_visit").value; 
    document.getElementById("value_per_visit").innerHTML ="gotit"; 
    alert("asad"); 
} 


</script> 

ですが、私は機能に達することができないのです。解決策はありますか？

Answer 1

イムあなたがのonchangeを追加したり、oninputイベントが要素をtdのために属性をすることができます実際にはわからない。..

または要素の値が変更されたoninput属性が発生します。 oninputイベントはonchangeイベントに似ていますが、oninputイベントは要素の値が変更された直後に発生し、onchangeは要素がフォーカスを失ったときに発生します。もう一つの違いは、onchangeイベントは 'keygenと' select '要素にも作用するということです。あなたがどちらoninputを使用したり、トリックを行う必要がありますあなたの要素にイベントリスナーを追加<td>

でONCHANGEカント表示され、私はに機能を追加する必要がないとして、これは非常にきれいだと思うことを読んhttps://www.w3schools.com/tags/ev_oninput.asp

基礎となるHTML。

//html 
<table> 
    <td class="cent" contenteditable='true' id="value_per_visit">data here</td> 
</table> 

//js 
var td = document.getElementById('value_per_visit') 

td.addEventListener('input', function(){ 
    console.log(td.innerHTML) 
}) 

Answer 2

最良の方法は、td要素内の入力をすることです：

<table> 
<tr> 
    <td> 
    <input id="Test" value="0" /> 
    </td> 
</tr> 
</table> 

し、その上に変更イベントをバインド：

$('#Test').change(function(){ 
    alert($(this).val()); 
})