readonly 和 disable的区别

readonly和disabled它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别,总结如下:

Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,但是表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去(readonly接受值更改可以回传,disable接受改但不回传数据)。

一般比较常用的情况是:

  1. 在某个表单中为用户预填了某个唯一识别代码,不允许用户改动,但是在提交时需要传递该值,此时应该将它的属性设置为readonly 。
  2. 经常遇到当用户正式提交了表单后需要等待管理员的信息验证,这就不允许用户再更改表单中的数据,而是只能够查看,由于disabled的作用元素范围大,所以此时应该使用disabled,但同时应该注意的是要将submit button也disabled掉,否则只要用户按了这个按钮,如果在数据库操作页面中没有做完整性检测的话,数据库中的值就会被清除。如果说在这种情况下用readonly来代替disabled的话,若表单中只有input(text / password)和textarea元素,那还是可以的,如果存在其他发元素,比如select,用户可以在重新改写值后按回车键进行提交(回车是默认的submit触发按键)
  3. 我们常常在用户按了提交按钮后,利用javascript将提交按钮disabled掉,这样可以防止网络条件比较差的环境下,用户反复点提交按钮导致数据冗余地存入数据库。

disabled和readonly这两个属性有一些共同之处,比如都设为true,则form属性将不能被编辑,往往在写js代码的时候容易混合使用这两个属性,其实他们之间是有一定区别的:

  • 如果一个输入项的disabled设为true,则该表单输入项不能获取焦点,用户的所有操作(鼠标点击和键盘输入等)对该输入项都无效,最重要的一点是当提交表单时,这个表单输入项将不会被提交。
  • 而readonly只是针对文本输入框这类可以输入文本的输入项,如果设为true,用户只是不能编辑对应的文本,但是仍然可以聚焦焦点,并且在提交表单的时候,该输入项会作为form的一项提交。

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-01-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

原来“神笔马良”的那根“笔”也可以写代码

HTML5学堂:在大家都羡慕“神笔马良”拥有那支无所不能的笔时,在前端开发中,也出现了一支很神奇的“笔”——CodePen,顾名思义,code+pen,即是代码...

3595
来自专栏CDA数据分析师

Excel:Ctrl+F人人都会用,但这3个技巧99%的人不知道

本文为简书作者傲看今朝原创,CDA数据分析师已获授权。 查找与替换是Excel中最为简单实用的功能之一,几乎用过Excel的人都知道这个功能,也都会简单使用这个...

2125
来自专栏张戈的专栏

为WordPress开启Nginx缩略图功能,七牛从此陌路

张戈博客曾分享过不少关于云存储的一些经验技巧,对七牛感兴趣或者遇到相关问题的朋友可以看一看以前的相关文章: 七牛&又拍云 CDN 云存储节省 GET 次数的小...

3965
来自专栏宋凯伦的技术小栈

【Angular JS】正确调用JQuery与Angular JS脚本 - 修复Warning: Tired to load angular more than once

  自己正在做一个小网站,使用Angular JS + Express JS + Mongo DB,在开发过程中,遇到一些问题,所以整理出来。希望对大家都有帮助...

2159
来自专栏散尽浮华

Linux终端复用神器-Tmux使用梳理

Tmux是一个优秀的终端复用软件,类似GNU Screen,但来自于OpenBSD,采用BSD授权。使用它最直观的好处就是,通过一个终端登录远程主机并运行tmu...

20210
来自专栏用户2442861的专栏

Chrome开发者工具不完全指南(一、基础功能篇)

http://www.cnblogs.com/constantince/p/4565261.html

712
来自专栏柠檬先生

VUE 入门基础(1)

一,安装 Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼...

25310
来自专栏Java开发

IntelliJ IDEA2017 + tomcat 即改即生效 实现热部署

2.点击deployment查看Deploy at the server startup 中tomcat每次所运行的包是 xxxx:war 还是其他,如果是xx...

772
来自专栏逸鹏说道

Linux下搜狗输入法和快捷键Ctrl+Space冲突的解决

把搜狗的启动快捷键给删了(如果有两个键盘【英+中】,你按Shift就可以切换了,完全没必要占着茅坑)

964
来自专栏java系列博客

IDEA全局护眼色

1773

扫码关注云+社区