Input只读属性详解
1.1概述
Readonly和Disabled都能够做到使用户不能够更改表单域中的内容。
1.2 Readonly和Disabled的区别
1、Readonly只针对input[type="text / password"]和textarea有效,而disabled对于所有的表单元素都有效。
2、设置disabled属性后,当表单以POST或GET的方式提交的时其值不会被传递出去,而readonly会将该值传递出去(readonly接受值更改可以回传,disable接受改但不回传数据)。
3、一个输入项设置disabled为true,则该表单输入项不能获取焦点,用户的所有操作(鼠标点击和键盘输入等)对该输入项都无效。而设置readonly为true,则用户只是不能编辑对应的文本,但是仍然可以聚焦焦点。
1.3实际情况讲解
常用的情况:
当在某个表单中为用户预填了某个唯一识别代码,不允许用户改动,但是在提交时需要传递该值,此时应该将它的属性设置为readonly 。
当用户正式提交了表单后需要等待管理员的信息验证,这时不允许用户再更改表单中的数据,而是只能够查看,由于disabled的作用元素范围大,所以此时应该使用disabled,同时应该注意的是要将submit/button也disabled掉,否则只要用户按了这个按钮,如果在数据库操作页面中没有做完整性检测的话,数据库中的值就会被清除。
在用户按了提交按钮后,利用javascript将提交按钮disabled掉,这样可以防止网络条件比较差的环境下,用户反复点提交按钮导致数据冗余地存入数据库。
发表评论
-
html框架之iframe和frame及frameset
2019-01-22 14:55 4104html框架之iframe和frame及f ... -
Select下拉选择框的美化
2017-11-02 17:19 3181Select下拉选择框的美化 1.1 CSS修改select下 ... -
Input元素去除获取焦点时的边框
2017-11-02 10:27 6920Input元素去除获取焦点 ... -
Input[type="radio"]和Input[type="checkbox"]的选中
2017-11-01 17:03 1566Input[type="radio"]和I ... -
input[type="file"]标签的美化
2017-11-01 15:34 1099input[type="file"]标签的 ... -
html布局之table表格布局
2017-09-25 08:52 3384html布局之table表格布局 1.1 table布局 1、 ... -
HTML实现页面自动跳的方法
2017-09-14 11:42 871HTML实现页面自动跳的方法 1.1方法一 直 ... -
html marquee标签讲解
2017-09-01 09:02 1603html marquee标签讲解 1.1概述 ... -
html路径小结
2017-08-25 09:38 554html路径小结 1.1概述 ... -
html meta标签用法详解(一)
2017-08-24 10:18 1087html meta标签用法详解(一) 1.1概述 ... -
Hack技术总结
2017-08-23 11:22 785Hack技术总结 1.1概述 ... -
HTML行内元素和块级元素的转换
2016-10-07 16:24 6212HTML行内元素和块级元素的转换 1.1 CSS displa ... -
div元素按比例缩放的实现方法
2016-09-08 17:54 16039div元素按比例缩放的实现方法 某些场景下,窗 ... -
HTML img布局问题详解
2016-09-08 16:52 1094HTML img布局问题详解 1.1 ... -
HTML中空格的实现方法详解
2016-09-08 15:15 2327HTML中空格的实现方法详解 浏览器总是会截短 ... -
RGB颜色与HEX十六进制颜色的换算
2016-09-07 20:57 1015RGB颜色与HEX十六进制颜色的换算 1.1换算表格 ... -
Web语义化详解
2016-07-21 14:51 621Web语义化详解 1.1概述 Web语义化主 ... -
DIV+CSS布局和TABLE布局详解
2016-07-21 10:53 764DIV+CSS布局和TABLE布局详 ... -
HTML引入CSS样式的方式详解
2016-07-21 10:06 1435HTML引入CSS样式的方式详解 1.1内联属性(Inlin ... -
设置input输入框为只读方法详解
2016-07-18 11:02 4884设置input输入框为只读方法详解 1.1禁用状态与启用状态 ...
相关推荐
下面小编就为大家带来一篇浅谈html中input只读属性readonly和disable的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Input子系统是所有I/O设备驱动的中间层,为上层提供了一个统一的界面。例如,在终端系统中,我们不需要去管有多少个键盘,多少个鼠标。它只要从input子系统中去取对应的事件(按键,鼠标移位等)就可以了。本文对input...
Linux设备模型之input子系统详解
ABB机器人系统输入输出信号System Input和Output详解
文档详细描述了Linux Input Subsystem的设计,Linux应用编程者可以以此文档做依据编写程序。Linux驱动开发者,此文档提供Input Subsystem的设计思想,可作为设计驱动的参考
PS:下面看下elementui通过 disabled 属性指定是否禁用 input 组件,如何用DOM操作取消disabled 属性 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=...
Linux设备模型之input子系统详解.doc
Linux设备模型之input子系统详解.docx
怎样让input type=file 只读,并能实现文件上传
有两种方式可以实现input的只读效果:disabled 和 readonly。 自然两种出来的效果都是只能读取不能编辑,可是两者有很大不同。 Disabled说明该input无效,及其value不会传递给任何程序,比如asp、php等。 Readonly...
主要介绍了input隐藏、只读和限制的属性,通过更改input的属性达到输入框限制长度和无法修改等功能,有需要的朋友可以参考下
ABB机器人系统输入输出信号System Input和Output详解
unity Input 类详解代码实现unity Input 类详解代码实现
Input 子系统驱动架构分析,很详细的分析了Input 子系统驱动架构