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" 背景变 灰色
随机推荐
- Python3 casefold() 方法
描述 Python casefold() 方法是Python3.3版本之后引入的,其效果和 lower() 方法非常相似,都可以转换字符串中所有大写字符为小写. 两者的区别是:lower() 方法只对 ...
- Python title() 方法
描述 Python title() 方法返回"标题化"的字符串,就是说所有单词都是以大写开始,其余字母均为小写. 语法 title() 方法语法: S.title() 参数 无. ...
- python 中写hive 脚本
1.直接执行.sql脚本 import numpy as np import pandas as pd import lightgbm as lgb from pandas import DataFr ...
- javascript 打印错误信息 catch err
使用 console.log(err); 是无法打印出来的.默认只能打印出错误信息.如图 http.interceptors.response.use(response => { return ...
- spring in action 5.1 小结 spring mvc起步
0 配置 DispatcherServlet 是 spring mvc的核心,常规配置方法可以查看之前博客.springMVC简单例子 在此使用servlet 3 规范和 spring3.1 功能增强 ...
- 用于检测进程的shell脚本代码小结
本文介绍一段shell脚本,它可以检测某进程或某服务是否正在运行,然后以邮件通知.有需要的朋友参考下 一个简单的shell脚本,用来找出关键的服务是否正在运行,适用于Linux操作系统或Unix操作系 ...
- nginx在用户使用ie的使用重定向到/nginx-MSIE目录下
[root@web01 ]# cat /app/server/nginx/conf/rewrite/default.conf #rewrite ^/index\.html /index.php las ...
- Mac下Selenium无法最大化Chrome解决方案
在用Selenium做自动化操作时,一般最大化浏览器的代码都是:driver.manage().window().maximize(), 但是在Mac下这样是无法最大化Chrome浏览器的,解决方法: ...
- pycharm设置安装python第三方插件
pycharm设置安装python第三方插件 转载于:https://www.mindg.cn/?p=80 今天下了一个pycharm,设置用它来安装python插件,以下是安装步骤,与大家分享,我的 ...
- MySQL 使用 SSL 连接(附 Docker 例子)
查看是否支持 SSL 首先在 MySQL 上执行如下命令, 查询是否 MySQL 支持 SSL: mysql> SHOW VARIABLES LIKE 'have_ssl'; +-------- ...