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 相关文章推荐
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
Javascript表格翻页效果实现思路及代码
Aug 23 Javascript
jquery解析xml字符串简单示例
Apr 11 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
微信小程序上传图片实例
May 28 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 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
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
PHP数组去重比较快的实现方式
2016/01/19 PHP
一段批量给页面上的控件赋值js
2010/06/19 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
js获取当前日期前七天的方法
2015/02/28 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
公司门卫的岗位职责
2014/02/19 职场文书
中标通知书格式
2015/04/17 职场文书
电力安全教育培训心得体会
2016/01/11 职场文书
Python使用DFA算法过滤内容敏感词
2022/04/22 Python