带有输入值的内部HTML

Question

有一个关于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作为具有用户输入值的字符串？

Answer 1

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

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

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

Answer 2

此解决方案更好。用于更多的输入。

  $('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');

Answer 3

使用.innerHTML（.html()）无法获得它。写入元素不会修改html标记，也不会更改实际标记中的value属性。

您只能通过直接询问元素的.value-值来访问当前内容。使用jQuery，您也可以通过.val()实现这一点。

Answer 4

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

Answer 5

DanCZ&Musa解决方案运行得很好，但我在文本区域遇到了问题。

我必须在Typescript项目中实现这一点，我发现的使文本区域显示值的唯一方法是：

textarea.innerHTML = textarea.value;