带有输入值的内部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 gotten包含带有"旧值"的输入,而不是用户输入的值.为什么是这样？我们如何将HTML作为用户输入的输入值的字符串？

Answer 1

新值存储为属性而不是属性,该值可以通过inputelement.value修改,不会影响属性.如果你想要带有新值的html,只需将属性设置为新值.

对于复选框和单选按钮,设置checked属性,为文本区域设置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');