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拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
创建js对象和js类的方法汇总
Dec 24 Javascript
浅析vue中常见循环遍历指令的使用 v-for
Apr 18 Javascript
JS实现520 表白简单代码
May 21 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
Apr 01 Javascript
实例详解带参数的 npm script
May 28 Javascript
JavaScript中的执行环境和作用域链
Sep 04 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
关于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
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
php生成HTML文件的类方法
2019/10/11 PHP
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
jquery 双色表格实现代码
2009/12/08 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
js调用图片隐藏&amp;显示实现代码
2013/09/13 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
JavaScript中创建字典对象(dictionary)实例
2015/03/31 Javascript
怎么引入(调用)一个JS文件
2016/05/26 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
Python中装饰器高级用法详解
2017/12/25 Python
django 解决manage.py migrate无效的问题
2018/05/27 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
简单叙述一下MYSQL的优化
2016/05/09 面试题
销售行业个人求职自荐信
2013/09/25 职场文书
家长学校实施方案
2014/03/15 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
大学生求职意向书
2015/05/11 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
如何利用python实现列表嵌套字典取值
2022/06/10 Python