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'元素。 https://www.w3schools.com/tags/ev_oninput.asp

请注意，您似乎无法使用oninput和on <td>

在你的元素上添加一个事件监听器应该可以解决问题，我认为这样更清晰，因为不需要在你的底层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());
})

通过onchange函数获取可编辑标签的价值？

2 个答案: