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.ajax传递中文参数的解决方法
May 28 Javascript
table对象中的insertRow与deleteRow使用示例
Jan 26 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
Sep 02 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
微信QQ的二维码登录原理js代码解析
Jun 23 Javascript
JS实现拖动滚动条评分的效果代码分享
Sep 29 Javascript
Angular的MVC和作用域
Dec 26 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
Apr 25 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
10个在JavaScript开发中常遇到的BUG
Dec 18 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
PHP实现MySQL更新记录的代码
2008/06/07 PHP
php URL跳转代码 减少外链
2011/06/25 PHP
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
namespace.js Javascript的命名空间库
2011/10/11 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
JavaScript实现控制打开文件另存为对话框的方法
2015/04/17 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
python使用socket远程连接错误处理方法
2015/04/29 Python
python+opencv实现动态物体识别
2018/01/09 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
资产运营委托书范本
2014/10/16 职场文书
2014年档案室工作总结
2014/12/01 职场文书
个人汇报材料范文
2014/12/30 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
教育教学读书笔记
2015/07/02 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers