通过onchange函数获取可编辑<td>标签的值？

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 属性在 or 元素的值改变时触发。 oninput 事件类似于 onchange 事件，但是 oninput 事件在元素的值发生变化后立即发生，而 onchange 事件在元素失去焦点时发生。另一个区别是 onchange 事件也适用于 'keygen 和 'select' 元素。 https://www.w3schools.com/tags/ev_oninput.asp

读到您似乎不能将 oninput 和 onchange 与 <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());
})

Answer 3

使用 onblur 而不是 onchange 对我有用！

--

通过onchange函数获取可编辑<td>标签的值？

Get value of editable <td> tags through onchange function?

javascript

html-table

onchange