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 相关文章推荐
一段非常简单的让图片自动切换js代码
Nov 10 Javascript
jquery 新手学习常见问题解决方法
Apr 18 Javascript
web css实现整站样式互相切换
Oct 29 Javascript
js 获取input点选按钮的值的方法
Apr 14 Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 Javascript
js实现点击切换checkbox背景图片的简单实例
May 08 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 Javascript
原生JavaScript实现轮播图
Jan 10 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 简单数组排序实现代码
2009/08/05 PHP
php smarty模版引擎中的缓存应用
2009/12/11 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
EXT中xtype的含义分析
2010/01/07 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
webpack项目调试以及独立打包配置文件的方法
2018/02/28 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
微信小程序 网络通信实现详解
2019/07/23 Javascript
收集的几个Python小技巧分享
2014/11/22 Python
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
什么是lambda函数
2013/09/17 面试题
项目负责人任命书
2014/06/04 职场文书
学校教研活动总结
2014/07/02 职场文书
红与黑读书笔记
2015/06/29 职场文书