input 标签的 disabled 和 readonly 属性

时间:2023-02-26 16:57:35

首先这两种属性都会使显示出来的文本框不能输入。

  disabled 属性:规定禁用 input 元素。被禁用的 input 元素既不可用,也不可点击和编辑,使用 tab 键时将会被跳过,用户的所有操作对该输入项都无效。会使文本框变灰。

  此属性对所有的表单元素都有效,但是表单元素在使用了 disabled 后,当我们将表单以 POST 或 GET 的方式提交的话,这个表单元素值不会被提取,也不会被提交。

注意:disabled 属性无法与 <input type="hidden"> 一起使用。

  readonly 属性:规定输入字段为只读。此时我们不能编辑对应的文本,但可以聚焦焦点或使用 tab 键切换到该字段,还可以选中或拷贝其文本。外观没有变化。

  只对文本输入框有效 ( input: text / password  和 textarea )。表单元素的 value 值仍能提取,在提交表单的时候,也会被提交。

常用情况:

  1. 某个表单不允许用户改动,但是在提交时需要传递该值,此时应该将它的属性设置为 readonly 。
  2. 在用户点击提交按钮后,防止用户反复点击提交按钮导致数据重复多次存入数据库,可以利用 js 将按钮 disabled。

input 标签的 disabled 和 readonly 属性的更多相关文章

  1. HTML input 标签不可编辑的 readonly 属性

    1 <form action="form_action.asp" method="get"> Name:<input type="t ...

  2. input文本框禁止修改文本&mdash&semi;&mdash&semi;disabled和readonly属性的作用及区别

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

  3. input中的disabled 和 readonly的区别

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

  4. input中的disabled、readonly和hidden

    最近开发项目的时候,遇到一个问题,就是我希望某个input中的值不能被修改,刚开始的时候,我想到的是disabled属性!但是,发现表单提交后,值无法传递过来! 解决方法: 可以设置其readonly ...

  5. Angular学习笔记 ——input 标签上的【name属性】和【ngModelOptions属性】

    利用“@angular/forms" 创建<form>表单的时候,系统默认会创建一个”FormGroup"的对象. 使用带有“ngModel"的”<in ...

  6. selenium 获取页面&lt&semi;input&gt&semi;标签的个数和各个属性的值

    获取页面某个标签的数量.id.name.class的值,来辅助定位         List<WebElement> lw =driver.findElements(By.tagName( ...

  7. easyui input设置为disabled提交后获取不到属性值

    在做网站管理后台的用户修改功能时,由于当前用户修改个人信息时规定用户名不能修改,故使用了input标签的disabled属性,但是在提交数据后却发现用户名显示为空了.后 来一查才知道input设置为d ...

  8. 了解HTML表单之input元素的30个元素属性

    目录 传统属性 name type accept alt checked disabled readonly maxlength size src value 新增属性 autocomplete au ...

  9. mvc涉及到input设置了disabled

    在做网站管理后台的用户修改功能时,由于当前用户修改个人信息时规定用户名不能修改,故使用了input标签的disabled属性,但是在提交数据后却发现用户名显示为空了.后来一查才知道input设置为di ...

随机推荐

  1. &lbrack;收藏&rsqb; javascript keycode大全

    做了一段的小练习,没往上发了~ 继续补下js的基础知识 ------------------------------------------------------------------------ ...

  2. React-redux-webpack项目总结之用到的Es6基本语法

    地址:http://blog.csdn.net/lsgqjh/article/details/53454627 http://www.cnblogs.com/hujunzheng/p/6133648. ...

  3. JavaWeb chapter10 JavaWeb开发模式

    1.  开发模式 (1)开发模式1:JSP+JavaBean (2)开发模式2:Servlet+JSP+JavaBean (MVC) 2.JavaBean 本质上是一个普通的Java类:需要遵循一定的 ...

  4. 区间dp总结

    poj 1141 Brackets Sequence 基础的区间dp题,注意dp边缘的初始化,以及递归过程中的边界 poj 2955 Brackets 依旧注意初始化,水题 hdu 4745 Two ...

  5. Hibernate映射之实体映射

    1.使用@注解配置实体类 实体类一般有ID.普通属性.集合属性等,分别对应数据库的主键.普通列.外键.@注解配置中,实体类用@Entity注解,用@Table指定对应的数据表,用@Id配置主键,用@C ...

  6. &num;&num;DAY9 UITabBarController

    ##DAY9 UITabBarController UIViewController的tabBarController UIViewController的tabBarItem #pragma mark ...

  7. wampserver图标黄色

    wampserver图标黄色(多个httpd.exe服务,以前装了apache) 服务--->httpd.exe右击这个服务打开文件位置就知道是不是wampserver的服务.如果不是就停掉这给 ...

  8. Android应用性能測试

    Android内存限制 java虚拟机有内存使用上限的限制 adb shell进入手机,这此參数被纪录在/system/build.prop中,假设想直接查看能够使用adb shell getprop ...

  9. 【TensorFlow使用教程】1 环境搭建

    一.TensorFlow主要依赖包——Protocol Buffer & Bazel 1. Protocol Buffer 首先要弄清三个概念: 结构化数据:指拥有多种属性的数据,例如用户信息 ...

  10. Android版本28使用http请求

    Android版本28使用http请求报错not permitted by network security policy android模拟器调试登录的时候报错 CLEARTEXT communic ...