disabled和readonly这两个属性有一些共同之处,比如都设为true,则form属性将不能被编辑,往往在写js代码的时候容易混合使用这两个属性,其实他们之间是有一定区别的:

  • 如果一个输入项的disabled设为true,则该表单输入项不能获取焦点,用户的所有操作(鼠标点击和键盘输入等)对该输入项都无效,最重要的一点是当提交表单时,这个表单输入项将不会被提交。
  • 而readonly只是针对文本输入框这类可以输入文本的输入项,如果设为true,用户只是不能编辑对应的文本,但是仍然可以聚焦焦点,并且在提交表单的时候,该输入项会作为form的一项提交。

Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,但是表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去(readonly接受值更改可以回传,disable接受改但不回传数据)。

  1. 我们常常在用户按了提交按钮后,利用javascript将提交按钮disabled掉,这样可以防止网络条件比较差的环境下,用户反复点提交按钮导致数据冗余地存入数据库。
  2. 在某个表单中为用户预填了某个唯一识别代码,不允许用户改动,但是在提交时需要传递该值,此时应该将它的属性设置为readonly 。

disabled和readonly区别的更多相关文章

  1. input的disabled和readonly区别

    <input name=”country” id=”country” size=12 value=”disabled提交时得不到该值" disabled=”disabled” > ...

  2. 表单对象属性disabled和readOnly

    简而言之: disabled 和 readonly 区别: disabled 被禁用后的元素,不会随表单提交 readonly 不可修改, 会随表单提交

  3. disabled和readonly的区别?

    在博客园中看到这样一篇文章,关于disabled和readonly的区别,以前还真的没有注意它们的区别,还是有必要知道它们的区别的,所以转载了. 这两个属性有类似之处,但是区别也是巨大的,之所以说类似 ...

  4. input文本框禁止修改文本——disabled和readonly属性的作用及区别

    1.input文本框禁止修改文本 disabled属性:<input type="text" name="name" value="xxx&qu ...

  5. input属性 disabled与readonly的区别

    从效果上看 源码 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  6. html中'disabled'与'readonly'的区别

    html中'disabled'与'readonly'的区别 此随笔增量编辑 disabled 在提交表单的时候 值不会带入表单中, 而readonly则可以将值带入表单中.

  7. js对表单设置了readonly和disabled后的区别

    Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: 1)Readonly只针对input(text / pa ...

  8. input中的disabled 和 readonly的区别

    1.Readonly只针对input(text / password)和textarea有效, 而disabled对于所有的表单元素都有效, 2.但是表单元素在使用了disabled后,当我们将表单以 ...

  9. disabled OR readonly

    1.对元素设置disabled以及readonly属性 $("#uid").attr("disabled",true); $("#uid") ...

随机推荐

  1. 如何发布自己的node模块

    一.注册自己的npm账户 在 npm 官网 https://www.npmjs.org 申请一个账号,并且进行必要的验证,需要填写用户名.密码和邮箱.并且注册成功后会向邮箱发一封邮件,需要进行验证. ...

  2. 基于vue的实战步骤

    1.脚手架vue-cli安装 npm install -g vue-cli (npm init -f 生成package.json文件) vue init webpack myapp cd myapp ...

  3. inventory file 与hosts patterns (ansible 机器清单 与 主机匹配模式)

    Ansible配置: ansible有两个核心配置文件: ansible.cfg 配置文件和Inventory配置文件 Ansible.cfg配置文件 Inventory机器列表配置 这里介绍Inve ...

  4. JavaScript入门经典(第四版)读书笔记

    第一部分 Web脚本编写与JavaScript语言的概念 1.document.lastModified()    ->    返回文档修改日期 2.<head>标签中的<sc ...

  5. Oracle 创建存储过程 提示权限不足或者提示表和视图不存在问题

    grant create view to hospital; --授予查询权限 grant select any table to hospital; --授予权限 grant select any ...

  6. 记解决一次“HTTP Error 400. The request URL is invalid”的错误

    今天将图片服务切到使用了cdn的机器上面去,然后就部分图片报如下图错误“HTTP Error 400. The request URL is invalid” 看到这种错误信息,一般的开发者心中可能会 ...

  7. componentWillMount和componentDidMount的区别

    1.componentWillMount  将要装载,在render之前调用: componentDidMount,(装载完成),在render之后调用 2.componentWillMount  每 ...

  8. ssh+key

    一.ssh概述 在进行数据传输之前,SSH先对联机数据包通过加密技术进行加密处理,加密后在进行数据传输.确保了传递的数据安全. lrzsz安装包传输本地与Linux SSH客户端(ssh命令)还包含一 ...

  9. 小组互评Alpha版本

    Thunder——爱阅app(测评人:任思佳) 一.基于NABCD评论作品,及改进建议 每个小组评论其他小组Alpha发布的作品:1.根据(不限于)NABCD评论作品的选题:2.评论作品对选题的实现效 ...

  10. PHP批量生成手机号

    <?php //匹配手机号的正则表达式 #^(13[0-9]|14[47]|15[0-35-9]|17[6-8]|18[0-9])([0-9]{8})$# $arr = array( 130,1 ...