onblur发生时如何获取textarea的当前编辑值？

Question

我想在 onblur 发生时获取我的 textarea 元素的当前 post 编辑值。尽管更改了内容，DOM 仍然给我原始内容。例如...

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>blur updates</title>
  <script>
    viewContent = function(id) {
      console.log(document.getElementById(id).innerHTML);
    };
  </script>
</head>

<body>
  <p>
    Edit one, then click in two. Does the value change in the console?
    <br/> No, it does not.
  </p>
  <br/>
  <form>
    <textarea id="1" onblur="viewContent('1')" cols="24" rows="4">one</textarea>
    <textarea id="2" onblur="viewContent('2')" cols="24" rows="4">two</textarea>
  </form>
</body>

</html>

对文本区域的任何编辑都不会反映在控制台中。如何获取当前内容？

Answer 1

使用.value代替.innerHTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>blur updates</title>
  <script>
    viewContent = function(id) {
      console.log(document.getElementById(id).value);
    };
  </script>
</head>

<body>
  <p>
    Edit one, then click in two. Does the value change in the console?
    <br/> No, it does not.
  </p>
  <br/>
  <form>
    <textarea id="1" onblur="viewContent('1')" cols="24" rows="4">one</textarea>
    <textarea id="2" onblur="viewContent('2')" cols="24" rows="4">two</textarea>
  </form>
</body>

</html>

进一步阅读：-

value

Element.innerHTML

onblur发生时如何获取textarea的当前编辑值？

How to get the current edited value of a textarea when onblur occurs?

javascript

dom

textarea

onblur