javascript中input中readonly和disabled区别介绍


Posted in Javascript onOctober 23, 2012

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

Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,包括select, radio, checkbox, button等。但是表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而 readonly会将该值传递出去(这种情况出现在我们将某个表单中的textarea元素设置为disabled或readonly,但是submit button却是可以使用的)。

例子

body> 
<form id="form1" name="form1" method="get" action=""> 
<input name="q1" type="text" id="q1" value="readonly" readonly="true" /> 
<input name="q2" type="text" disabled="disabled" id="q2" value="disabled" /> 
<input type="submit" name="Submit" value="Submit" /> 
</form>

js控制代码

<body> 
<form enctype="multipart/form-data" action="sign.php" method="post" name="moblie_act_form" id="moblie_act_form" > 
<input type="text" class="input" id="mobile" name="mobile" value="{$mobile}" readonly="true" disabled="disabled"> 
<input type="button" value="修改" onClick="modify_phone()"> 
</form> 
</html> 
<script language="javascript"> 
function modify_phone(){ 
if(confirm("您确定要修改您的手机号码吗?")){ 
document.moblie_act_form.mobile.readOnly = false; 
document.moblie_act_form.mobile.disabled = false; 
} 
return true; 
} 
</script>

实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> <body> 
<form id="form1" name="form1" method="get" action=""> 
<input name="q1" type="text" id="q1" value="readonly" readonly="true" /> 
<input name="q2" type="text" disabled="disabled" id="q2" value="disabled" /> 
<input type="submit" name="Submit" value="Submit" /> 
</form> 
</body> 
</html>

属性 值 描述 disabled disabled

当 input 元素首次加载时禁用此元素,这样用户就无法在其中写文本,或选定它。
注释:不能与 type="hidden" 一同使用。

readonly readonly
指示此域的值不能被修改。
注释:仅可与 type="text" 配合使用。

总结

readonly代码:<input type="text" name="readonly" readonly="readonly" />
readonly不可编辑,可复制,可选择,可以接收焦点但不能被修改,后台会接收到传值.
disabled代码: <input type="text" name="disabled" disabled="disabled" />
disabled不可编辑,不可复制,不可选择,不能接收焦点,后台也不会接收到传值

Javascript 相关文章推荐
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
Nov 22 Javascript
layui form表单提交后实现自动刷新
Oct 25 Javascript
JS前端广告拦截实现原理解析
Feb 17 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
关于js new Date() 出现NaN 的分析
Oct 23 #Javascript
js Dialog 实践分享
Oct 22 #Javascript
JS控件的生命周期介绍
Oct 22 #Javascript
重写javascript中window.confirm的行为
Oct 21 #Javascript
js indexOf()定义和用法
Oct 21 #Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 #Javascript
基于jquery DOM写的类似微博发布的效果
Oct 20 #Javascript
You might like
DC动漫人物排行
2020/03/03 欧美动漫
福利彩票幸运号码自动生成器
2006/10/09 PHP
用PHP的ob_start();控制您的浏览器cache!
2006/11/25 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
Javascript Symbol原理及使用方法解析
2020/10/22 Javascript
从零学python系列之教你如何根据图片生成字符画
2014/05/23 Python
Pyhton中防止SQL注入的方法
2015/02/05 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
Form表单及django的form表单的补充
2019/07/25 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
python pymysql库的常用操作
2020/10/16 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
党风廉政承诺书
2014/03/27 职场文书
《放小鸟》教学反思
2014/04/20 职场文书
乡镇消防安全责任书
2014/07/23 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python
公历12个月名称的由来
2022/04/12 杂记