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 相关文章推荐
JS URL传中文参数引发的乱码问题
Sep 02 Javascript
jQuery 使用手册(二)
Sep 23 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
JS 获取鼠标左右键的键值方法
Oct 11 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 Javascript
dul无法加载bootstrap实现unload table/user恢复
Sep 29 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 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
实现分十页分向前十页向后十页的处理
2006/10/09 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
php中出现空白页的原因及解决方法汇总
2014/07/08 PHP
Javascript引用指针使用介绍
2012/11/07 Javascript
js转义字符介绍
2013/11/05 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
2019/08/16 Javascript
移动端手指操控左右滑动的菜单
2019/09/08 Javascript
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
Python实现的递归神经网络简单示例
2017/08/11 Python
Python实现简单文本字符串处理的方法
2018/01/22 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
Sublime开发python程序的示例代码
2018/01/24 Python
python简单实现9宫格图片实例
2020/09/03 Python
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
学校端午节活动方案
2014/08/23 职场文书
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
暑期实践个人总结
2015/03/06 职场文书
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang
Django中session进行权限管理的使用
2021/07/09 Python
Python OpenCV超详细讲解基本功能
2022/04/02 Python