input的disable和readonly
在设计网页时,有时需要将输入框设置为只读状态,即其中的内容不可编辑,实现这种设计的方法有两种:
使用input的disable和readonly两个属性。
先来看下二者的区别:
<input type= "text " readonly= "true " value= "这是readonly的! ">
<input type= "text " disabled= "true " value= "这是disabled的! ">
可以看到,虽然两种都是让input的内容不能被用户编辑,但是对于后期的美工处理就有问题了!
例如:
<style>
input
{
color:blue;
}
</style>
只有readonly的那个文本是蓝色的!
disabled是按系统设置的disabled颜色来设置前景色的,css对其无效!
另外,readonly和disabled还有一个不同点就是,当input属性为readonly时,提交表单是可以获得input的内容。
如果是disabled则不能获得所提交的内容,返回值全部为null,所以此处需要注意。
慎用readonly和disabled,指定了disabled的表单,在submit时,不会把它的值传出去。
例如,有两个text,一个是readonly一个是disabled,submit后,只能发送那个不是disabled的。
input的disable和readonly的更多相关文章
- input标签 disabled 和 readonly的区别
需求描述:今天提交代码,老大审了一下,给我指出了一个改正的地方,XXX的详细信息页面(不是修改页面) input的内容是不能改的,给我指出的时候,我立马就知道了这个该怎么改了,加个readonly不就 ...
- 最近遇到的若干Web前端问题:disable和readonly,JqueryEasyUI,KindEditor
最近项目中用到了Jquery Easyui和KindEditor等框架组件,问题真不少啊~ 一些看起来很简单理所当然的事情,竟然花费了不少时间,才解决好~ 1.readonly和disable的区 ...
- input属性disabled和readonly的区别
两种属性的写法如下: 1.<input type="text" name="name" value="xxx" disabled=&q ...
- html <input type="text" />加上readonly后在各种浏览器的差异。
<html> <body> <p>Name:<input type="text" name="email" /> ...
- input属性 disabled与readonly的区别
从效果上看 源码 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- input的disabled和readonly区别
<input name=”country” id=”country” size=12 value=”disabled提交时得不到该值" disabled=”disabled” > ...
- ios的input的输入框,readonly的时候,会弹出一小块ios的软键盘
找了半天方法,结果input直接加个方法就好了 onfocus="this.blur()"
- 前端 html input标签 disable 属性
该属性只要出现在标签中,表示禁用该控件 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- input 输入框不能点 readonly , disabled
只读 readonly="readonly" 不可用 disabled="disabled" 背景变 灰色
随机推荐
- 剑指offer代码 vs2013执行
方法: 代码文件夹名称为:CodingInterviewChinese2-master 1. 用vs2013加载解决方案 .sln文件 2. 一个解决方案下面有多个项目,通过右键解决方案->属性 ...
- 最短作业优先(SJF)
1. 最短作业优先: 最短作业优先(SJF)是一种调度任务请求的调度策略.每个任务请求包含有请求时间(即向系统提交的请求的时间)和持续时间(即完成任务所需时间). 当前任务完成后,SJF策略会选择最短 ...
- js ~取非运算符的妙用,将-1转为0(或假值)
典型的运用场景就是indexOf
- Sublime Text 使用指南 - 前端开发神器
Sublime Text 前端开发的神器 Sublime Text是一个前端开发者必备的编辑器,大量的插件,完善的功能,优越的性能,有非常多的特色,给前端开发提供了一个完善的开发条件. 本文主要介绍的 ...
- mysql常见数据提示 mysql报错提示大全
错误代码和消息 目录 B.1. 服务器错误代码和消息 B.2. 客户端错误代码和消息 本章列出了当你用任何主机语言调用MySQL时可能出现的错误.首先列出了服务器错误消息.其次列出了客户端程序消息. ...
- django 官方文档下载
今天发现自己的django文档有点过时了,于是想去下载一份新,找了老半天才找到pdf的下载地址:于是把它记录下来,希望以后可以直接用. 一.进行django官方网站: 二.文档的pdf文件就在docu ...
- 自己是个菜鸟 自己查找的简单的适合初学的Makefile
工程中的代码分别存放在add/add_int.c.add/add_float.c.add/add.h.sub/sub_int.c.sub/sub_float.c.sub/sub.h.main.c中. ...
- sql查看所有表大小的方法
sql查看所有表大小的方法. 代码: declare @id int ) declare @pages int declare @dbname sysname ,) ,) ,) create tabl ...
- iOS开发之使用AFN上传图片
//1.创建管理者对象 AFHTTPSessionManager *manager = [AFHTTPSessionManager manager]; manager.responseSerializ ...
- chrome 插件地址 知乎
chrome运行内存过大:https://www.zhihu.com/question/20061319 chrome扩展程序:https://www.zhihu.com/question/19594 ...