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

  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文本框禁止修改文本——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 获取页面<input>标签的个数和各个属性的值

    获取页面某个标签的数量.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. npm install的时候出现unexpected end of file错误提示时的解决办法

    运行npm cache clean --force 清空npm缓存即可决这个问题 参考:https://blog.csdn.net/jingtian678/article/details/811876 ...

  2. GDB调试原理——ptrace系统调用

    本文由霸气的菠萝原创,转载请注明出处:http://www.cnblogs.com/xsln/p/ptrace.html 全部关于gdb的文章索引请点这里 引子: gdb基本上大家都在用,你有没有想过 ...

  3. 15 个 Android 通用流行框架大全(转载)

    1. 缓存 DiskLruCache    Java实现基于LRU的磁盘缓存 2.图片加载 Android Universal Image Loader 一个强大的加载,缓存,展示图片的库 Picas ...

  4. java框架之SpringMVC(2)-补充及拦截器

    高级参数绑定 package com.zze.springmvc.web.controller; import org.springframework.stereotype.Controller; i ...

  5. python发送html格式的邮件

    python发邮件 #!/usr/bin/python # -*- coding: UTF-8 -*- import smtplib from email.mime.text import MIMET ...

  6. Spark mllib多层分类感知器在情感分析中的实际应用

    import org.apache.spark.ml.Pipeline import org.apache.spark.ml.classification.MultilayerPerceptronCl ...

  7. centos7.5固定局域网ip

    有点时候,比如像我们单位,没事干就停一次网,结果ip变了,还得重新看ip,重新配置,很麻烦,所以干脆把自己ip固定,以不变应万变!!! 1.首先查看自己的ip是什么: $ ifconfig eno1: ...

  8. 实验一:C++简单程序设计

    [实验一] #2-28 实现一个简单的菜单程序,运行时显示“Menu:A(dd) D(elete) S(ort) Q(uit),Selete one:”提示用户输入.A表示增加,D表示删除,S表示排序 ...

  9. C#设计模式(8)——桥接模式(Bridge Pattern)(转)

    一.引言 这里以电视遥控器的一个例子来引出桥接模式解决的问题,首先,我们每个牌子的电视机都有一个遥控器,此时我们能想到的一个设计是——把遥控器做为一个抽象类,抽象类中提供遥控器的所有实现,其他具体电视 ...

  10. Vue+element 实现文件导出xlsx格式

    傻瓜教程:   第一步:安装两个依赖包 npm install --save xlsx file-saver 第二步:建立一个Vue文件,导入以下代码即可 <template> <d ...