html 取消只读属性,浅谈html中input只读属性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的一项提交。

以上这篇浅谈html中input只读属性readonly和disable的区别就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

html 取消只读属性,浅谈html中input只读属性readonly和disable的区别相关推荐

scale和java比较_浅谈java中BigDecimal的equals与compareTo的区别
这两天在处理支付金额校验的时候出现了点问题,有个金额比较我用了BigDecimal的equals方法来比较两个金额是否相等,结果导致金额比较出现错误(比如3.0与3.00的比较等). [注:以下所讲都 ...
python列表和数组区别java_浅谈numpy中np.array()与np.asarray的区别以及.tolist
array和asarray都可以将结构数据转化为ndarray,但是主要区别就是当数据源是ndarray时,array仍然会copy出一个副本,占用新的内存,但asarray不会. 1.输入为列表时 ...
python使用input函数时、必须添加提示文字-浅谈python3中input输入的使用
今天谈一下关于python中input的一些基本用法(写给新手入门之用,故只谈比较实用的部分). 首先,我们可以看一下官方文档给我们的解释(在python的shell中输入命令即可): 上面的英文说的 ...
java nio 李林峰_浅谈Java中BIO、NIO和AIO的区别和应用场景
最近一直在准备面试,为了使自己的Java水平更上一个档次,拜读了李林峰老师的<Netty权威指南>,了解了Java关于IO的发展和最新的技术,真是受益匪浅,现在把我总结的关于BIO.NIO ...
浅谈c++中结构体和共用体的区别
在c++中,结构体(struct)和共用体(union)是两种很相似的复合数据类型,都可以用来存储多种数据类型,但是两者还有很大的区别. 结构体(struct) 结构是用户自定义的类型,比数组更灵活, ...
vue 给checkbox 赋值_浅谈vue中关于checkbox数据绑定v-model指令的个人理解
vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见, 下面是最常见的例子: {{msg}} js里data初始化数据 new Vue({ el: "#myA ...
浅谈caffe中train_val.prototxt和deploy.prototxt文件的区别
浅谈caffe中train_val.prototxt和deploy.prototxt文件的区别标签: caffe深度学习CaffeNet 2016-11-02 16:10 1203人阅读评论(1) ...
python的re2和re区别_浅谈Python中re.match()和re.search()的使用及区别
1.re.match()fvk免费资源网 re.match()的概念是从头匹配一个符合规则的字符串,从起始位置开始匹配,匹配成功返回一个对象,未匹配成功返回None.fvk免费资源网包含的参数如下: ...
gather torch_浅谈Pytorch中的torch.gather函数的含义
pytorch中的gather函数 pytorch比tensorflow更加编程友好,所以准备用pytorch试着做最近要做的一些实验. 立个flag开始学习pytorch,新开一个分类整理学习pyt ...

html 取消只读属性,浅谈html中input只读属性readonly和disable的区别

html 取消只读属性,浅谈html中input只读属性readonly和disable的区别相关推荐

最新文章

热门文章