首页 技术 正文
技术 2022年11月9日
0 收藏 981 点赞 4,750 浏览 844 个字
<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!

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,484
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,899
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,732
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,485
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,125
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,285