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 相关文章推荐
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
JavaScript简单下拉菜单实例代码
Sep 07 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
JS实现简单tab选项卡切换
Oct 25 Javascript
JavaScript实现简单动态表格
Dec 02 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
模拟xcopy的函数
2006/10/09 PHP
php中实现记住密码自动登录的代码
2011/03/02 PHP
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
php编写的简单页面跳转功能实现代码
2013/11/27 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
Javascript 篱式条件判断
2008/08/22 Javascript
javascript fullscreen全屏实现代码
2009/04/09 Javascript
javascript 限制输入脚本大全
2009/11/03 Javascript
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
python 文件查找及内容匹配方法
2018/10/25 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
python如何实现单链表的反转
2020/02/10 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
英文自荐信格式
2013/11/28 职场文书
境外导游求职信
2014/02/27 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
初中英语教学反思范文
2016/02/15 职场文书