JavaScriptでtextareaのinnerHTMLとvalueの取得結果の違い

textareaはinnerHTMLにデフォルト値を入れると、DomElementのinnerHTMLでは常にこの値が取得されるようになっており、valueからは取得できる値は現在入力されているものとなるという違いがあるっぽい。なにはともあれ書いてみようぜ。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Example - textarea</title>
</head>
<body>
<textarea>こんにちは</textarea>
<input type="button" value="実行">
<script src="test.js"></script>
</body>
</html>

JavaScriptはこんな感じで実行ボタン押す度に検証してみる

var textarea = document.getElementsByTagName('textarea')[0];
document.getElementsByTagName('input')[0].addEventListener('click', function() {
console.log('innerHTML = ' + textarea.innerHTML);
console.log('value = ' + textarea.value);
}, false);

まず表示した直後に実行

innerHTML = こんにちは
value = こんにちは

何かいれて実行して結果の変化を確認

innerHTML = こんにちは
value = こんばんわ

検証用ファイルはGithubあげとくぜ

github.com

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA