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 4250html框架之iframe和frame及f ... -
Select下拉选择框的美化
2017-11-02 17:19 3386Select下拉选择框的美化 1.1 CSS修改select下 ... -
Input元素去除获取焦点时的边框
2017-11-02 10:27 7059Input元素去除获取焦点 ... -
Input[type="radio"]和Input[type="checkbox"]的选中
2017-11-01 17:03 1700Input[type="radio"]和I ... -
input[type="file"]标签的美化
2017-11-01 15:34 1210input[type="file"]标签的 ... -
html布局之table表格布局
2017-09-25 08:52 3507html布局之table表格布局 1.1 table布局 1、 ... -
HTML实现页面自动跳的方法
2017-09-14 11:42 960HTML实现页面自动跳的方法 1.1方法一 直 ... -
html marquee标签讲解
2017-09-01 09:02 1712html marquee标签讲解 1.1概述 ... -
html路径小结
2017-08-25 09:38 638html路径小结 1.1概述 ... -
html meta标签用法详解(一)
2017-08-24 10:18 1219html meta标签用法详解(一) 1.1概述 ... -
Hack技术总结
2017-08-23 11:22 1003Hack技术总结 1.1概述 ... -
HTML行内元素和块级元素的转换
2016-10-07 16:24 6307HTML行内元素和块级元素的转换 1.1 CSS displa ... -
div元素按比例缩放的实现方法
2016-09-08 17:54 16180div元素按比例缩放的实现方法 某些场景下,窗 ... -
HTML img布局问题详解
2016-09-08 16:52 1184HTML img布局问题详解 1.1 ... -
HTML中空格的实现方法详解
2016-09-08 15:15 2435HTML中空格的实现方法详解 浏览器总是会截短 ... -
RGB颜色与HEX十六进制颜色的换算
2016-09-07 20:57 1109RGB颜色与HEX十六进制颜色的换算 1.1换算表格 ... -
Web语义化详解
2016-07-21 14:51 667Web语义化详解 1.1概述 Web语义化主 ... -
DIV+CSS布局和TABLE布局详解
2016-07-21 10:53 813DIV+CSS布局和TABLE布局详 ... -
HTML引入CSS样式的方式详解
2016-07-21 10:06 1490HTML引入CSS样式的方式详解 1.1内联属性(Inlin ... -
设置input输入框为只读方法详解
2016-07-18 11:02 4955设置input输入框为只读方法详解 1.1禁用状态与启用状态 ...
相关推荐
### Input 标签的属性详解 #### 一、概述 在HTML中,`<input>`标签是最常用的表单元素之一,用于收集用户输入的数据。它通过`type`属性定义了不同的输入控件类型,比如文本框、密码框、按钮等。本文将详细介绍`...
本篇文章将详细讲解`input`属性中的几个关键特性:隐藏、只读、失效以及输入限制,并提供相关的JavaScript处理方法。 ### 隐藏属性(`hidden`) `<input type="hidden">`是一种特殊的输入类型,它创建的字段在页面...
### Lua中设置table为只读属性的方法详解 在Lua编程语言中,table是构建数据结构的基础类型之一,广泛应用于各种场景。然而,在实际项目开发过程中,可能会遇到这样的问题:一些只读table容易被误修改,这不仅会...
- **AliasName**: 只读属性,用于获取字段的别名。这通常用于在用户界面上显示更友好的字段名称,而不是数据库中的实际字段名称。 - **Name**: 只读属性,用于获取字段的实际名称。这是数据库表中的字段名称。 - **...
### Input资源的格式详解 #### 一、概述 在网页设计与开发中,`input`元素扮演着极其重要的角色,它允许用户输入数据,并通过不同的属性实现多种功能。本文将详细解析`input`的不同类型及其在实际开发中的应用技巧...
### Input高级用法详解 #### 一、概述 在网页开发过程中,`input`元素是与用户交互最为频繁的HTML元素之一。通过合理地利用`input`的各种属性和事件,可以实现更为丰富的用户体验和功能。本文将根据提供的部分代码...
### 只读文本框知识点详解 #### 一、概述 在网页开发中,为了提高用户体验并确保数据安全,经常需要对表单中的某些输入框进行只读处理。这些输入框通常用于显示固定的信息或者防止用户意外修改关键数据。在HTML中...
- **CTSHolding**:这是一个只读属性,表示Clear To Send (CTS)线的状态,用于硬件握手中的RTS/CTS协议。当CTS线为高电平时,表示可以发送数据。 总的来说,MSComm控件为串行通信提供了一种直观且易于使用的接口,...
- **CTSHolding属性**:只读属性,表示CTS线(Clear To Send)的状态,指示数据传输是否可以进行。 这些属性允许程序员控制串口通信的细节,如接收阈值、握手协议等。例如,`CTSHolding`属性可用于判断是否可以安全...
最近发现别人项目中在输入密码的时候发现input框无法输入进去 ...到此这篇关于详解elementUI中input框无法输入的问题的文章就介绍到这了,更多相关element input无法输入内容请搜索软件开发网以前的文章或继续浏览下面
### 使用JavaScript控制INPUT输入内容详解 #### 一、概述 在网页开发中,为了提高用户体验并确保数据的有效性,我们经常需要对用户输入的数据进行控制和验证。通过使用JavaScript(简称JS),我们可以轻松地实现这...
这是一个只读属性,用于检查Clear To Send (CTS)线路的状态,CTS是调制解调器指示可以传输的信号。如果CTSHolding为False,可能意味着CTS超时,这时MSComm控件会触发comEventCTSTO事件。 此外,MSComm控件还有其他...
CTSHolding属性是一个只读属性,用于检测Clear To Send (CTS)线的状态,它用于RTS/CTS硬件握手,当CTS线为低电平时,可能表示通信超时。 在使用MSComm控件进行串口编程时,除了了解和设置这些属性外,还需要熟悉...
本文将详细介绍如何在layui中初始化列表时正确处理CheckBox属性。 首先,layui的CheckBox主要用于用户进行多选操作,常用于表格、列表等场景,以便用户可以选取一组相关的项目。在静态页面中,按照layui的官方示例...
- **Input属性**:从接收缓冲区返回并删除字符。 - **Output属性**:向传输缓冲区写入字符串。 此外,还有一些其他属性,如`SThreshold`、`CDHolding`、`DSRHolding`、`InputLen`、`EOFEnable`等,它们分别用于设置...
- **功能**: 只读寄存器,用于读取端口的当前输入状态。 - **结构**: 每位对应一个引脚的状态。 - **注意事项**: - 需要设置为输入模式才能读取。 ##### 3.4 PxOUT (Port x Output Register) - **功能**: 输出缓冲...
- **只读开关**:设置`readOnly`属性为`true`或`false`,控制日期框是否只读。 - **高亮周末**:通过`highLineWeekDay`属性设置是否高亮显示周末。 - **操作按钮自定义**:`isShowClear`和`isShowToday`分别控制...