带有输入值的内部HTML
Inner HTML with input values
有一个关于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作为具有用户输入值的字符串?
新值存储为属性而非属性,该值可以通过inputelement.value
获得,修改该值不会影响属性。如果您想要具有新值的html,只需将属性设置为新值即可。
对于复选框和单选按钮,设置选中的属性,为文本区域设置innerHTML,对于选择,在选项上设置所选属性
http://jsfiddle.net/mowglisanu/F7urT/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');
使用.innerHTML
(.html()
)无法获得它。写入元素不会修改html标记,也不会更改实际标记中的value
属性。
您只能通过直接询问元素的.value
-值来访问当前内容。使用jQuery,您也可以通过.val()
实现这一点。
$('#input_id').attr('value',$('#input_id').val());
将把值放入html
DanCZ&Musa解决方案运行得很好,但我在文本区域遇到了问题。
我必须在Typescript项目中实现这一点,我发现的使文本区域显示值的唯一方法是:
textarea.innerHTML = textarea.value;
相关文章:
- Javascript内部HTML动画
- Javascript,在body_class()=登录时更改内部html
- 带有输入值的内部HTML
- 内容可编辑分区-根据内部HTML位置的光标位置
- Chrome扩展:是否有一种方法可以运行JavaScript来获取页面上的内部html,并将其保存到扩展中的变量中
- 能够获取元素长度,但不能获取内部 HTML
- 如何在文本框中显示内部 HTML 输出
- 如何通过内部HTML设置图像
- 为什么我不能在变量上使用内部HTML属性
- 获取@Media打印类型的内部 HTML
- Javascript和CSS,内部HTML与外部文件
- 如何在委托中获取列表项中元素的内部HTML
- 敲除数据绑定=“;html:html,内部html点击事件不起作用
- 从内部HTML中删除所有锚标记或链接到 wikipedia.com
- 用jQuery.html更新span内部html在IE中不起作用
- 编译角度代码以便能够执行内部html操作
- 在html中未定义,使用内部html
- jsp内部html中的Javascript静态变量
- 如何为iframe的内部html编写css
- 使用javascript获取内部HTML元素