textarea 中的 innerHTML 和 value
<textarea></textarea>
<input type="button" value="click" />
<script>
document.querySelector("input[type='button']").addEventListener("click", function() {
document.querySelector("textarea").innerHTML = 'hello world';
}, false);
</script>
这段代码是有问题的,点击按钮,然后删除 textarea 区域的文字,再点按钮,文字无法再次生成。这里我们不应该使用 innerHTML
,而应该使用 value
。
textarea 的 value 和 innerHTML 总结:(摘自 http://mygit.me/2016/07/13/textarea-value-and-innerhtml/)
- innerHTML 仅在 textarea 初始化的时候对 value 有影响,value 的内容就是从 innerHTML 来的;
- 除此之外,innerHTML 和 value 没有任何关系,修改 value 不影响 innerHTML,修改innerHTML 不影响 value;
- 界面上呈现的永远是 value 的值,而不是 innerHTML,比如通过代码修改 innerHTML 之后,界面上 textarea 里面的内容还是 value 的值;
- 获取文本框的内容,自始至终都应该读取 value;
- value 获取的是原始内容,innerHTML 获取的内容会自动将
<
和>
这2个符号转义; - 初始化 textarea 的内容只能写在
<textarea>
和</textarea>
的中间,不能像 input 那样写在 value 属性上面;
所以 value 一般用于一些表单元素的获取值,input,select 等,textarea 也算表单元素,而 innerHTML 用于 div, span, td 等其他元素。
总结下就是,切记 表单元素别用 innerHTML!
textarea 中的 innerHTML 和 value的更多相关文章
- 关于textarea中换行、回车、空格的识别与处理
需求:在textarea中输入文字,提交给后台后,后台输出在另一个页面,文字按原格式显示. 问题:如何还原输入框中的换行和空格? 兼容性:IE9以上.FF.chrome在换行处匹配/\n/ ...
- textarea中限制输入字符长度
要在textarea中限制输入字符的长度,比如在twitter中要限制字符为140个,可实现的方法有: 1. <textarea name="A" cols="45 ...
- TextArea中定位光标位置
原文:TextArea中定位光标位置 在项目中,遇到一个场景:希望能在TextArea中输入某条记录中的明细(明细较简单,没有附属信息,只用记录顺序和值即可,譬如用"+"号来作为明 ...
- textArea中的maxlength是无效的 解决办法
-------------------------------------------------------------------------------------- <s:texta ...
- 每天一个JavaScript实例-处理textarea中的字符成每一行
<!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 消灭textarea中的神秘空格
之前在做页面的时候经常发现写的textarea中会有一些默认的空格出现,鼠标可以在里面任意点击.这个问题折腾了好久,后来发现,原来是<textarea></textarea>标 ...
- textarea 中的换行符问题
下面是我对这个问题的解决过程,最后算是完全搞懂了,真是阴沟里险些翻船 1.必须知道textarea中的换行符是 \n (个人检测发现按回车键是\n,好像在linux下是\r\n) 2.用nl2br之 ...
- textarea中的文字自动换行问题
在textarea中设置输入内容的自动换行,也是在CSS中设置word-wrap:break-word; 属性.需要额外注意的是textarea元素本身有一个warp属性,其取值含义如下: off:不 ...
- JSON 传值 textarea中虚拟换行功能
遇到错误的袭击, 错误出现,使用jquery中ajax进行查询数据时执行完以后,需要把数据封装成为JSON类型的数据,并传递到前台去的时候出现Invalid JSON 错误,经查找后发现是在使用tex ...
随机推荐
- 【转载】iOS屏幕适配设计
移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选择性地忽视android适配问题,只出一套iOS平台设计稿.随着苹果发布两种新尺寸的大屏iPhone 6, ...
- [MEF插件式开发] 一个简单的例子
偶然在博客园中了解到这种技术,顺便学习了几天. 以下是搜索到一些比较好的博文供参考: MEF核心笔记 <MEF程序设计指南>博文汇总 先上效果图 一.新建解决方案 开始新建一个解决方案Me ...
- sqlserver 乐观并发模式
一开始不怎么理解乐观并发模式是什么. 这种模式可以在死锁问题上使用. 在sql中 这样就是乐观并发模式. SqlServer默认开启的是悲观并发模式 例如:
- 在DevExpress中使用CameraControl控件进行摄像头图像采集
在我们以前的项目了,做摄像头的图片采集,我们一般还是需要做一个封装处理的,在较新版本的DevExpress控件里面,增加了一个CameraControl控件,可以直接调用摄像头显示的,因此也可以做头像 ...
- TabControl 伸缩式菜单 仿照 uwp SplitView
留下备用笔记 之前用的Frame+Page的切换content<类似于一个contentControl 干多个事情>,但是发现页面content内容控件多的时候,每一次切换都有点卡,点击了 ...
- C# - 网络编程 之 Socket
命名空间 using System.Net; using System.Net.Socket; Socket类 初始化 public socket (AddressFamily addressFami ...
- screen命令
基本用法 screen -S testname 在这里面执行命令,即使终端突出,进程也不会断掉 screen -list查看有哪些screen screen -r testname 恢复
- git教程
http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000
- 使用tomcat manager 管理和部署项目
在部署tomcat项目的时候,除了把war文件直接拷贝到tomcat的webapp目录下,还有一种方法可以浏览器中管理和部署项目,那就是使用tomcat manager. 默认情况下,tomcat m ...
- 设置这些之后,Google突然可以打开了
打开的是:https://www.google.com.hk