Question

我正在尝试使用onchange事件触发器在可编辑字段上进行数据验证。当事件发生时，我正在通过该事件。我的函数尝试在alert中显示innerHTML，但它总是返回null。

这是我的代码：

<head>
<script>
   function chkchg(evt) {
     alert(evt.innerHTML);
   }
</script>
</head>
<body>
  <table>
    <tr>
    <td><input class='patched' contenteditable='true' type='text' onchange='chkchg(event.target);' value='Yes'></td>
    <td><input class='excluded' contenteditable='true' type='text' onchange='chkchg(event.target);' value='No'></td>
    </tr>
  </table>
</body>

看起来很简单，但我不知道出了什么问题。

Answer 1

尝试仅将事件传递给chkchg函数并引用函数内部的target属性。但这里真正的解决方法是引用输入的value属性而不是innerHTML：

<head>
 <script>
  function chkchg(evt) {
   alert(evt.target.value);
  }
 </script>
 </head>
 <body>
  <table>
   <tr>
   <td><input class='patched' contenteditable='true' type='text'   onchange='chkchg(event);' value='Yes'></td>
   <td><input class='excluded' contenteditable='true' type='text' onchange='chkchg(event);' value='No'></td>
  </tr>
 </table>

Answer 2

如果您想要输入的值，为什么不使用this.value。并且innerHTML无法处理输入字段。你需要使用value。

<script>
    function chkchg(evt) {
        alert(evt);
    }
</script>
<table>
    <tr>
        <td>
            <input class='patched' contenteditable='true' type='text' onchange='chkchg(this.value);' value='Yes'></td>
        <td>
            <input class='excluded' contenteditable='true' type='text' onchange='chkchg(this.value);' value='No'></td>
    </tr>
</table>

或使用this。然后，您可以访问其他属性。

<input class='patched' id='patched' contenteditable='true' type='text' onchange='chkchg(this);' value='Yes'>

<script>
    function chkchg(evt) {
        alert(evt.id + " - " + evt.value);
    }
</script>

event.target.innerHTML没有返回当前值

2 个答案: