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 相关文章推荐
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
js实现仿QQ秀换装效果的方法
Mar 04 Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 Javascript
js中javascript:void(0) 真正含义
Nov 05 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
Node.js+Express配置入门教程
May 19 Javascript
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
Vue 修改网站图标的方法
Dec 31 Vue.js
微信小程序用户授权最佳实践指南
May 08 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 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 代码优化的42条建议 推荐
2009/09/25 PHP
PHP 文件上传全攻略
2010/04/28 PHP
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
PHP的几个常用数字判断函数代码
2012/04/24 PHP
php实现购物车功能(下)
2016/01/05 PHP
jQuery DOM操作小结与实例
2010/01/07 Javascript
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
python3 实现口罩抽签的功能
2020/03/11 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
能源工程专业应届生求职信
2014/03/01 职场文书
体育馆的标语
2014/06/24 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
士兵突击观后感
2015/06/16 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
车间班组长竞聘书
2015/09/15 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers