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 相关文章推荐
新浪的图片新闻效果
Jan 13 Javascript
自写简单JS判断是否已经弹出页面
Oct 20 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
原生javascript实现addClass,removeClass,hasClass函数
Feb 25 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
Nov 06 Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
Django+Vue.js搭建前后端分离项目的示例
Aug 07 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
Angular4 ElementRef的应用
Feb 26 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 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
php strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
5款Javascript颜色选择器
2009/10/25 Javascript
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
学习JavaScript设计模式(封装)
2015/11/26 Javascript
js性能优化技巧
2015/11/29 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
django使用JWT保存用户登录信息
2020/04/22 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
美国本地交易和折扣网站:LocalFlavor.com
2017/10/26 全球购物
linux面试题参考答案(11)
2016/11/26 面试题
青年志愿者事迹材料
2014/02/07 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
工地宣传标语
2014/06/18 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
借条如何写
2015/05/26 职场文书
《我是什么》教学反思
2016/02/16 职场文书
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
Go web入门Go pongo2模板引擎
2022/05/20 Golang