内部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及其对应的用户输入值？

- Matthew Ruddy

Answer 1

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

对于复选框和单选按钮，请设置选中的属性，为文本区域设置innerHTML，在选择上设置选定的选项。 http://jsfiddle.net/mowglisanu/F7urT/5/

- Musa

---

谢谢，虽然简单但出于某种原因我没有想到。那么其他类型的表单字段呢？比如选择框、文本区域等等？问题应该提到这一点而不仅仅是输入框；我很抱歉。 - Matthew Ruddy

谢谢。这很简单，我本应该自己想到的。我的固执导致我浪费时间试图弄清楚InnerHTML发生了什么，而不是实现一个简单的解决方案。再次感谢。我以为它实际上获取了当前HTML，包括任何更改的输入值等，而不是字面上读取源代码。 - Matthew Ruddy

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

- DanCZ

Answer 3

你不能使用 .innerHTML (.html()) 获取它。向 元素中写入内容不会修改 HTML 标记，也不会更改实际标记中的 value 属性。

你只能通过直接请求 元素的 .value - 值来访问当前内容。使用 jQuery 可以通过 .val() 实现。

- jAndy

Answer 4

$('#input_id').attr('value',$('#input_id').val());
会将值放入HTML中。

- orhanhenrik

Answer 5

DanCZ和Musa的解决方案非常好，但我在textarea上遇到了麻烦。

我必须在TypeScript项目中实现这个功能，而我找到的唯一让textarea显示值的方法是：

textarea.innerHTML = textarea.value;

- Stephie