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编程起步(第五课)
Jan 10 Javascript
JavaScript实现动态增加文件域表单
Feb 12 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
Jun 02 Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
jquery的live使用注意事项
Feb 18 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 Javascript
js 概率计算(简单版)
Sep 12 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
js贪心算法 钱币找零问题代码实例
Sep 11 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脚本的10个技巧(7)
2006/10/09 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
flask入门之表单的实现
2018/07/18 Python
python读取xlsx的方法
2018/12/25 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
简述 Python 的类和对象
2020/08/21 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
python动态规划算法实例详解
2020/11/22 Python
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
校园餐饮创业计划书
2014/01/10 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
党员民主评议总结
2014/10/20 职场文书
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers