javascript基础常识问答（八）

readyonly 与 disabled 的区别

readyonly

Readonly只针对input(text / password)和textarea有效，

表单元素在使用了readyonly后，当我们将表单以POST或GET的方式提交的话，这个元素的值会被传递出去(这种情况出现在我们将某个表单中的textarea元素设置为disabled或readonly，但是submit button却是可以使用的)。

比较常用的情况

在某个表单中为用户预填了某个唯一识别代码，不允许用户改动，但是在提交时需要传递该值，此时应该将它的属性设置为readonly

而readonly只是针对文本输入框这类可以输入文本的输入项，如果设为true，用户只是不能编辑对应的文本，但是仍然可以聚焦焦点，并且在提交表单的时候，该输入项会作为form的一项提交。

disabled

disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等

表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去(这种情况出现在我们将某个表单中的textarea元素设置为disabled或readonly，但是submit button却是可以使用的)。

比较常用的情况

经常遇到当用户正式提交了表单后需要等待管理员的信息验证，这就不允许用户再更改表单中的数据，而是只能够查看，由于disabled的作用元素范围大，所以此时应该使用disabled，但同时应该注意的是要将submit button也disabled掉，否则只要用户按了这个按钮，如果在数据库操作页面中没有做完整性检测的话，数据库中的值就会被清除。如果说在这种情况下用readonly来代替disabled的话，若表单中只有input(text / password)和textarea元素，那还是可以的，如果存在其他发元素，比如select，用户可以在重新改写值后按回车键进行提交(回车是默认的submit触发按键)

我们常常在用户按了提交按钮后，利用javascript将提交按钮disabled掉，这样可以防止网络条件比较差的环境下，用户反复点提交按钮导致数据冗余地存入数据库。

如果一个输入项的disabled设为true，则该表单输入项不能获取焦点，用户的所有操作（鼠标点击和键盘输入等）对该输入项都无效，最重要的一点是当提交表单时，这个表单输入项将不会被提交。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><form action="test.html" method="get"><!--<input type="text"  name="disa" value="aabbcc" disabled="disabled" />--><input type="text"  name="read" value="aabbcc" readonly="readonly" /><input type="submit" value="提交"  /></form><script>//disabled   灰掉//disabled  写在标签里   可以直接写disabled   也可以写 disabled="disabled"//在js中 操作disabled  设置true  或  false//form提交时    不作为表单域 传输值//适用于  所有标签对象//readonly  只读//readonly  写在标签里   readonly   也可以写 readonly="readonly"//在js中 readonly  设置true  或  false//form提交时  作为表单域 传输值//适用于  textArea  password    text  这种 文本</script>
</body>
</html>

总结

ReadOnly 和 Disabled 的作用是使用户不能够更改表单域中的内容.
但是二者还是有着一些区别的：

1、Readonly 只针对 input(text/password)和 textarea 有效，而 disabled 对于所有的表单元素有效，包括 select,radio,checkbox,button 等。
2、在表单元素使用了 disabled 后，我们将表单以 POST 或者 GET 的方式提交的话，这个元素的值不会被传递出去，而 readonly 会将该值传递出去

javascript基础常识问答（八）相关推荐

＜ JavaScript基础知识之思维导图＞
文章目录前言一.Javascript变量二.Javascript运算符三.Javascript数组四.Javascript流程语句五.Javascript字符串函数六.Javascrip ...
操作系统（三十二）内存的基础常识
3.1 内存的基础常识目录 3.1 内存的基础常识 3.1.1 计算机的多级存储结构 3.1.2 程序的装入和链接 3.1.1 计算机的多级存储结构对于计算机的存储结构而言一般可以分为三层:最高层 ...
javascript基础教程_JavaScript基础教程（九）对象、类的定义与使用
对象.类的定义与使用对象与类是面向对象程序设计语言教学过程中不可避免需要讲解的内容之一.很多人将两者混为一谈,简单认为对象就是类,类就是对象.实际上深入分析的话,对象与类的区别还是较为明显的.本文主 ...
论文浅尝 | 通过知识到文本的转换进行知识增强的常识问答
笔记整理:陈卓,浙江大学在读博士,主要研究方向为低资源学习和知识图谱论文链接:https://www.aaai.org/AAAI21Papers/AAAI-10252.BianN.pdf 发表会议: ...
javaweb(02) JavaScript基础知识
javaweb(02): JavaScript基础知识 JavaScript简介为什么出现JavaScript Javascript是什么 JavaScript和Java的关系? 就像卡巴斯基和巴基 ...
Web前端之JavaScript基础
Web前端之JavaScript基础 JavaScript介绍变量变量类型基本的数据类型Number String Boolean underfined null typeof运算符引用的数据 ...
JavaScript基础练习题（一）
JavaScript基础练习题(一) 注:仅供参考,不可用于其他用途一.单选题 1.HTML页面中写JavaScript时,会用到HTML的一个标签,它是 A .script B . st ...
【Javascript 基础】课堂笔记1
计算机编程基础计算机语言,总的来说分为三类:机器语言.汇编语言.高级语言. 标记语言(HTML)被读取的,编程语言有逻辑&行为能力. JavaScript&基础使用 JS 是运行在客 ...
JavaScript-百炼成仙(第1节掌握JavaScript基础1.1-1.21)
文章目录 1.1 第一章初入宗门 1.2 第二章直接量 1.3 第三章数据类型 1.4 第四章数据类型扩展内容: 1.5 第五章基础考核 1.6 第六章何老 1.7 第七章对象数据类型 ...
【Javascript基础语法】第五周预习博客
Javascript基础语法前言一.初识JavaScript 1.JS是什么 2.作用 3.浏览器执行js简介 4.Js组成二.JS的引入方式 1.行内式 2.内部引入 3.外部引入三.js语 ...

javascript基础常识问答（八）

readyonly 与 disabled 的区别

readyonly

比较常用的情况

disabled

比较常用的情况

总结

javascript基础常识问答（八）相关推荐

最新文章

热门文章