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 ...
随机推荐
- caffe报错:cudnn.hpp:86] Check failed: status == CUDNN_STATUS_SUCCESS (3 vs. 0) CUDNN_STATUS_BAD_PARAM 原因
在实际项目中出现的该问题,起初以为是cudnn版本的问题,后来才定位到在网络进行reshape操作的时候 input_layer->Reshape({(), input_layer->sh ...
- Oracle启动关闭
启动: [oracle@oracleSigle ~]$ sqlplus / as sysdba SQL*Plus: Release 11.2.0.1.0 Production on Wed Nov ...
- 32位ubuntu16.4编译android4.1.1
安装所需库 sudo apt-get install build-essential sudo apt-get install make sudo apt-get install gcc sudo a ...
- fiddler学习总结--fiddler抓包篡改数据请求
操作步骤: 步骤一.在fiddler的命令行中输入需要拦截的地址:bpu https://www.baidu.com 记得按一下回车键 步骤二.在百度搜索栏中,输入“火影忍者”,页面会一直处于加载的状 ...
- Android Studio 添加已经移除的Module
Android Studio 删除Module时,需要先在Project Structure中点击“-”来移除,此时小手机图标消失,但是这个时候Module并没有在硬盘中删除,只是和这个Project ...
- EasyUI相关知识点整理
EasyUI相关知识整理 EasyUI是一种基于jQuery.Angular..Vue和React的用户界面插件集合.easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能.也就 ...
- jquery单击事件的写法
方式一: //点击要素,修改URL $(document).on('click',"#modUrlYs" ,function (){ //$("#modUrlYs&quo ...
- 51nod1432贪心
n个人,已知每个人体重.独木舟承重固定,每只独木舟最多坐两个人,可以坐一个人或者两个人.显然要求总重量不超过独木舟承重,假设每个人体重也不超过独木舟承重,问最少需要几只独木舟? Input 第一行包含 ...
- laravel中empty(),is_null() 以及isEmpty()
PHP中 empty() empty() 函数用于检查一个变量是否为空. if(empty($result->order)){ //操作 } is_null() is_null() 函数用于检测 ...
- mysql获取随机字符串和随机数的方法
在我们开发的过程中,我们可能会需要在表中随机生成一些数据以供我们进行相应的测试. 就像我之前发的“mysql创建存储过程向数据表中加入规定条数的数据” 那么我们应该怎样生成随机的字符串和随机数字呢? ...