4

有一个关于 innerHTML 和已输入的输入值的简短问题。请参阅下面的简短示例（为方便起见，使用 jQuery）：

http://jsfiddle.net/F7urT/2/

jQuery：

jQuery(document).ready(function($) {
    $('.send').click(function() {
        alert( $('.content').html() );
        return false;
    });
});​

html:

<div class="content">
    <input type="text" name="input" value="Old Value" />
    <input type="button" class="send" value="Send" />
</div>​

如果您编辑输入值，然后单击“发送”按钮，则警报显示获取的 innerHTML 包含具有“旧值”的输入，而不是用户输入的值。为什么是这样？我们如何才能将 HTML 作为字符串与用户输入的输入值一起获取？

4

5 回答 5

8

新值存储为属性而不是属性，值可以通过 获取inputelement.value，修改值不影响属性。如果您想要具有新值的 html，只需将属性设置为新值。

为复选框和单选按钮设置选中属性，为文本区域设置innerHTML，为选择设置选项上的选定属性

http://jsfiddle.net/mowglisanu/F7urT/5/

于 2012-08-25T23:38:29.587 回答
5

这个解决方案更好。适用于更多输入。

  $('input[type=text]').attr('value', function (i, val) { return val; });
  $('input[type=checkbox],input[type=radio]').attr('checked', function () { return this.checked; });
  $('textarea').html(function () { return this.value; });
  $('select').find(':selected').attr('selected', 'selected');
于 2014-10-27T10:32:53.900 回答
3

你不能用.innerHTML( .html()) 得到它。写入一个element 不会修改 html 标记，也不会更改value实际标记中的属性。

您只能通过直接询问元素为其.value- 值。使用 jQuery，你也可以通过它来做到这.val()一点。

于 2012-08-25T23:37:36.477 回答
3

$('#input_id').attr('value',$('#input_id').val());
将值放入 html

于 2012-08-25T23:38:15.420 回答
0

DanCZ 和 Musa 解决方案效果很好，但我在 textarea 上遇到了麻烦。

我必须在 Typescript 项目中实现这一点，我发现让 textarea 显示值的唯一方法是：

textarea.innerHTML = textarea.value;
于 2020-06-08T12:53:02.700 回答