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属性过滤选择器使用示例
Jun 18 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
Vue指令的钩子函数使用方法
Mar 20 Javascript
jQuery返回定位插件详解
May 15 jQuery
JavaScript实现QQ列表展开收缩扩展功能
Oct 30 Javascript
详解Vue用cmd创建项目
Feb 12 Javascript
详解微信小程序调用支付接口支付
Apr 28 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 Javascript
JS实现简单的九宫格抽奖
Jun 28 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调用新浪短链接API的方法
2014/11/08 PHP
php实现图片缩略图的方法
2016/03/29 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
JS+CSS实现简易实用的滑动门菜单效果
2015/09/18 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
python从ftp下载数据保存实例
2013/11/20 Python
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
出纳员的岗位职责
2014/02/22 职场文书
文秘个人求职信范文
2014/04/22 职场文书
工程催款通知书
2015/04/17 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
详解Java实践之抽象工厂模式
2021/06/18 Java/Android
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫