对于HTML表单输入字段,disabled =“ disabled”和readonly =“ readonly”有什么区别?
我已经阅读了一些,但是似乎找不到关于不同的浏览器如何对待事物的可靠信息。
#1楼
当元素具有禁用属性时,不会触发任何事件。
以下任何都不会触发。
$("[disabled]").click( function(){ console.log("clicked") });//No Impact
$("[disabled]").hover( function(){ console.log("hovered") });//No Impact
$("[disabled]").dblclick( function(){ console.log("double clicked") });//No Impact
而只读将被触发。
$("[readonly]").click( function(){ console.log("clicked") });//log - clicked
$("[readonly]").hover( function(){ console.log("hovered") });//log - hovered
$("[readonly]").dblclick( function(){ console.log("double clicked") });//log - double clicked
#2楼
具有“禁用”属性的元素将不会提交,或者可以说其值不会与请求一起发布。
即
<input type="textbox" name="field" value="field" disabled="disabled" />
区别
- 禁用的控件不会获得焦点。
- 在选项卡导航中会跳过禁用的控件。
- 禁用的控件无法成功发布。
如果要发布字段数据,请使用readonly属性。
即
<input type="textbox" name="field" value="field" readonly="readonly" />
- 只读元素获得焦点,但用户无法对其进行修改。
- 选项卡导航中包含只读元素。
- 只读元素已成功发布。
#3楼
readonly
元素只是不可编辑的,而是在提交相应form
时发送的。 disabled
元素不可编辑,也不会在提交时发送。 另一个不同之处在于, readonly
元素可以集中显示(并且在通过表格“制表”时获得焦点),而disabled
元素则不能。
在这篇很棒的文章或w3c的定义中阅读有关此内容的更多信息。 引用重要的部分:
关键差异
禁用属性
- 禁用的表单元素的值不会传递到处理器方法。 W3C将此称为成功元素(其工作方式类似于未选中的表单复选框。)
- 某些浏览器可能会为禁用的表单元素覆盖或提供默认样式。 (灰色或浮雕文字)Internet Explorer 5.5对此特别讨厌。
- 禁用的表单元素不会获得焦点。
- 在选项卡导航中会跳过禁用的表单元素。
只读属性
- 并非所有表单元素都具有只读属性。 最值得注意的是,
<SELECT>
,<OPTION>
和<BUTTON>
元素没有只读属性(尽管它们都有禁用的属性)- 浏览器不提供表单元素为只读的默认覆盖的视觉反馈。 (这可能是一个问题……请参阅下文。)
- 设置了readonly属性的表单元素将被传递到表单处理器。
- 只读的表单元素可以得到关注
- 选项卡式导航中包含只读表单元素。
#4楼
禁用表示提交表单时不会提交该表单元素中的任何数据。 只读意味着将提交元素中的任何数据,但用户无法更改。
例如:
<input type="text" name="yourname" value="Bob" readonly="readonly" />
这将为元素“您的名字”提交值“ Bob”。
<input type="text" name="yourname" value="Bob" disabled="disabled" />
这将不会为元素“您的姓名”提交任何内容。
#5楼
与其他答案相同(禁用不发送到服务器,只读),但是某些浏览器阻止突出显示已禁用的表单,而只读仍可以突出显示(并复制)。
http://www.w3schools.com/tags/att_input_disabled.asp
http://www.w3schools.com/tags/att_input_readonly.asp
只读字段无法修改。 但是,用户可以对其进行标签,突出显示并从中复制文本。
对于HTML表单输入字段,disabled =“ disabled”和readonly =“ readonly”有什么区别?相关推荐
- Vue表单输入绑定(元婴中期)
表单输入绑定 基础用法 你可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自 ...
- input框的一系列操作(输入框必填*号,验证单选框为必选,默认选中单选按钮,点击禁用表单输入域,输入框变为只读)
例① :输入框必填,用*号提示 <p class="form-group"><label for="author">姓名</lab ...
- java GUI怎么输入_在Swing中创建Java GUI以进行表单输入
好吧,我已经浏览了整个互联网,但却未能找到这个问题的答案,所以也许有人可以提供一些见解. 我正在开发一个相对简单的Java应用程序,它将取代目前用于系统访问请求的Word文档.它旨在允许表单输入新的员 ...
- html表格输入框怎么左移动,当我向CSS中的文本框添加边框时,HTML表单输入会移动...
我想在登录表单上的输入字段中添加边框,但是当我添加边框时:1px纯黑色;到#登录表单输入,然后所有的文本框移出位置.当我向CSS中的文本框添加边框时,HTML表单输入会移动 当用户输入不正确的凭据到表 ...
- Flutter进阶—质感设计之表单输入
FormField控件是单一表单字段,这个控件维护表单字段的当前状态,以便更新和验证错误能在UI中可见.TextField控件就是在FormField中包装了一个Input控件(后面的文章讲解),Fo ...
- uniapp 输入法画面_表单输入绑定 · uni-app跨平台移动应用开发 · 看云
# 表单输入绑定 ## [基础用法](https://cn.vuejs.org/v2/guide/forms.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95 &qu ...
- web 表单自定义字段_带有自定义服务器字段验证的AJAX表单提交
web 表单自定义字段 Overview 总览 This article presents a method for validating form data in a PHP script usin ...
- js检测、控制表单输入必须为中文
js检测.控制表单输入必须为中文 <html> <head> <meta http-equiv="content-Type" content=&quo ...
- Vue007_ 表单输入绑定
表单输入绑定 使用 v-model 对表单数据自动收集 1) text/textarea 2) checkbox 3) radio 4) select <!DOCTYPE html> & ...
最新文章
- Linux Exploit系列之三 Off-By-One 漏洞 (基于栈)
- ImportError:cannot import name ‘display‘ File “XX“, line 5, in <module> from IPython import display
- 8个实用的响应式设计框架
- vivado SOC——hello word(上)建立SOC系统
- Spring Cloud Alibaba - 07 Ribbon 应用篇及内置的负载均衡算法
- python一些常用函数_【python】常用的一些内置函数
- mysql触发器 生僻字_MySQL生僻字插入失败的处理方法(Incorrect string value)
- 高斯白噪声下基于EM的多径时延估计
- 剑指Offer丑数问题
- 把斯坦福大学土地租出去?特曼坦言:目的就是赚钱
- Mac下新安装的MySQL无法登陆root用户解决方法
- 1 1 2 2 3 ...java_java 接收一个键盘输入的整数,计算1-1/2!+1/3!-1/4!.....1/n!
- 钟平逻辑英语语法_钟平逻辑英语教程视频1-5季全(含笔记 支持百度云)
- 域管理电脑自动锁屏html,简单两步让windows实现关闭屏幕时自动锁定电脑
- 产品生产的各个阶段:DV,EV,PV ········是什么意思
- sessionid java_java如何获取sessionid
- Win7下eclipse提交Job到hadoop集群
- Graphics2D 使用详解 【转】
- 科学幻想其实是对科学研究的发展方向起到很好的引领作用
- 【​观察】六脉神剑第二式-读写分离之双箭齐发
热门文章
- 【建议收藏】复盘:2021年最新、最全、最实用的Android岗学习资料/面试真题
- const变量的使用方法。。
- 【Android】图像中Drawable向Bitmap的两种转换方法
- Android.bp 语法浅析-Android10.0编译系统(八)
- 数值选择器(NumberPicker)的功能与用法
- 图标化java_java最小化到托盘显示图标实现
- python简单界面实现-python实现的简单窗口倒计时界面实例
- JavaScript语言基础6
- JavaScript语言基础3
- iOS自动布局(AutoLayout)之 NSLayoutAnchor