input 标签的 disabled 和 readonly 属性
首先这两种属性都会使显示出来的文本框不能输入。
disabled 属性:规定禁用 input 元素。被禁用的 input 元素既不可用,也不可点击和编辑,使用 tab 键时将会被跳过,用户的所有操作对该输入项都无效。会使文本框变灰。
此属性对所有的表单元素都有效,但是表单元素在使用了 disabled 后,当我们将表单以 POST 或 GET 的方式提交的话,这个表单元素值不会被提取,也不会被提交。
注意:disabled 属性无法与 <input type="hidden"> 一起使用。
readonly 属性:规定输入字段为只读。此时我们不能编辑对应的文本,但可以聚焦焦点或使用 tab 键切换到该字段,还可以选中或拷贝其文本。外观没有变化。
只对文本输入框有效 ( input: text / password 和 textarea )。表单元素的 value 值仍能提取,在提交表单的时候,也会被提交。
常用情况:
- 某个表单不允许用户改动,但是在提交时需要传递该值,此时应该将它的属性设置为 readonly 。
- 在用户点击提交按钮后,防止用户反复点击提交按钮导致数据重复多次存入数据库,可以利用 js 将按钮 disabled。
input 标签的 disabled 和 readonly 属性的更多相关文章
- HTML input 标签不可编辑的 readonly 属性
1 <form action="form_action.asp" method="get"> Name:<input type="t ...
- input文本框禁止修改文本——disabled和readonly属性的作用及区别
1.input文本框禁止修改文本 disabled属性:<input type="text" name="name" value="xxx&qu ...
- input中的disabled 和 readonly的区别
1.Readonly只针对input(text / password)和textarea有效, 而disabled对于所有的表单元素都有效, 2.但是表单元素在使用了disabled后,当我们将表单以 ...
- input中的disabled、readonly和hidden
最近开发项目的时候,遇到一个问题,就是我希望某个input中的值不能被修改,刚开始的时候,我想到的是disabled属性!但是,发现表单提交后,值无法传递过来! 解决方法: 可以设置其readonly ...
- Angular学习笔记 ——input 标签上的【name属性】和【ngModelOptions属性】
利用“@angular/forms" 创建<form>表单的时候,系统默认会创建一个”FormGroup"的对象. 使用带有“ngModel"的”<in ...
- selenium 获取页面<input>标签的个数和各个属性的值
获取页面某个标签的数量.id.name.class的值,来辅助定位 List<WebElement> lw =driver.findElements(By.tagName( ...
- easyui input设置为disabled提交后获取不到属性值
在做网站管理后台的用户修改功能时,由于当前用户修改个人信息时规定用户名不能修改,故使用了input标签的disabled属性,但是在提交数据后却发现用户名显示为空了.后 来一查才知道input设置为d ...
- 了解HTML表单之input元素的30个元素属性
目录 传统属性 name type accept alt checked disabled readonly maxlength size src value 新增属性 autocomplete au ...
- mvc涉及到input设置了disabled
在做网站管理后台的用户修改功能时,由于当前用户修改个人信息时规定用户名不能修改,故使用了input标签的disabled属性,但是在提交数据后却发现用户名显示为空了.后来一查才知道input设置为di ...
随机推荐
- npm install的时候出现unexpected end of file错误提示时的解决办法
运行npm cache clean --force 清空npm缓存即可决这个问题 参考:https://blog.csdn.net/jingtian678/article/details/811876 ...
- GDB调试原理——ptrace系统调用
本文由霸气的菠萝原创,转载请注明出处:http://www.cnblogs.com/xsln/p/ptrace.html 全部关于gdb的文章索引请点这里 引子: gdb基本上大家都在用,你有没有想过 ...
- 15 个 Android 通用流行框架大全(转载)
1. 缓存 DiskLruCache Java实现基于LRU的磁盘缓存 2.图片加载 Android Universal Image Loader 一个强大的加载,缓存,展示图片的库 Picas ...
- java框架之SpringMVC(2)-补充及拦截器
高级参数绑定 package com.zze.springmvc.web.controller; import org.springframework.stereotype.Controller; i ...
- python发送html格式的邮件
python发邮件 #!/usr/bin/python # -*- coding: UTF-8 -*- import smtplib from email.mime.text import MIMET ...
- Spark mllib多层分类感知器在情感分析中的实际应用
import org.apache.spark.ml.Pipeline import org.apache.spark.ml.classification.MultilayerPerceptronCl ...
- centos7.5固定局域网ip
有点时候,比如像我们单位,没事干就停一次网,结果ip变了,还得重新看ip,重新配置,很麻烦,所以干脆把自己ip固定,以不变应万变!!! 1.首先查看自己的ip是什么: $ ifconfig eno1: ...
- 实验一:C++简单程序设计
[实验一] #2-28 实现一个简单的菜单程序,运行时显示“Menu:A(dd) D(elete) S(ort) Q(uit),Selete one:”提示用户输入.A表示增加,D表示删除,S表示排序 ...
- C#设计模式(8)——桥接模式(Bridge Pattern)(转)
一.引言 这里以电视遥控器的一个例子来引出桥接模式解决的问题,首先,我们每个牌子的电视机都有一个遥控器,此时我们能想到的一个设计是——把遥控器做为一个抽象类,抽象类中提供遥控器的所有实现,其他具体电视 ...
- Vue+element 实现文件导出xlsx格式
傻瓜教程: 第一步:安装两个依赖包 npm install --save xlsx file-saver 第二步:建立一个Vue文件,导入以下代码即可 <template> <d ...