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 相关文章推荐
背景音乐每次刷新都可以自动更换
Feb 01 Javascript
固定表格行列(expression)在IE下适用
Jul 25 Javascript
js网页实时倒计时精确到秒级
Feb 10 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
jQuery toggle 代替方法
Mar 22 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
js实现三角形粒子运动
Sep 22 Javascript
js面向对象方式实现拖拽效果
Mar 03 Javascript
关于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
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
详解JS浏览器事件循环机制
2019/03/27 Javascript
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
幼儿园招生广告
2014/03/19 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
小学综合实践活动总结
2014/07/07 职场文书
员工团队活动方案
2014/08/28 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
大学军训决心书
2015/02/05 职场文书
纪委立案决定书
2015/06/24 职场文书
法制主题班会教案
2015/08/13 职场文书
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers