在设计网页时,有时需要将输入框设置为只读状态,即其中的内容不可编辑,实现这种设计的方法有两种:
使用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的更多相关文章

  1. input标签 disabled 和 readonly的区别

    需求描述:今天提交代码,老大审了一下,给我指出了一个改正的地方,XXX的详细信息页面(不是修改页面) input的内容是不能改的,给我指出的时候,我立马就知道了这个该怎么改了,加个readonly不就 ...

  2. 最近遇到的若干Web前端问题:disable和readonly,JqueryEasyUI,KindEditor

    最近项目中用到了Jquery Easyui和KindEditor等框架组件,问题真不少啊~  一些看起来很简单理所当然的事情,竟然花费了不少时间,才解决好~  1.readonly和disable的区 ...

  3. input属性disabled和readonly的区别

    两种属性的写法如下: 1.<input type="text" name="name" value="xxx" disabled=&q ...

  4. html <input type="text" />加上readonly后在各种浏览器的差异。

    <html> <body> <p>Name:<input type="text" name="email" /> ...

  5. input属性 disabled与readonly的区别

    从效果上看 源码 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  6. input的disabled和readonly区别

    <input name=”country” id=”country” size=12 value=”disabled提交时得不到该值" disabled=”disabled” > ...

  7. ios的input的输入框,readonly的时候,会弹出一小块ios的软键盘

    找了半天方法,结果input直接加个方法就好了 onfocus="this.blur()"

  8. 前端 html input标签 disable 属性

    该属性只要出现在标签中,表示禁用该控件 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  9. input 输入框不能点 readonly , disabled

    只读 readonly="readonly" 不可用 disabled="disabled" 背景变 灰色

随机推荐

  1. Python3 casefold() 方法

    描述 Python casefold() 方法是Python3.3版本之后引入的,其效果和 lower() 方法非常相似,都可以转换字符串中所有大写字符为小写. 两者的区别是:lower() 方法只对 ...

  2. Python title() 方法

    描述 Python title() 方法返回"标题化"的字符串,就是说所有单词都是以大写开始,其余字母均为小写. 语法 title() 方法语法: S.title() 参数 无. ...

  3. python 中写hive 脚本

    1.直接执行.sql脚本 import numpy as np import pandas as pd import lightgbm as lgb from pandas import DataFr ...

  4. javascript 打印错误信息 catch err

    使用 console.log(err); 是无法打印出来的.默认只能打印出错误信息.如图 http.interceptors.response.use(response => { return ...

  5. spring in action 5.1 小结 spring mvc起步

    0 配置 DispatcherServlet 是 spring mvc的核心,常规配置方法可以查看之前博客.springMVC简单例子 在此使用servlet 3 规范和 spring3.1 功能增强 ...

  6. 用于检测进程的shell脚本代码小结

    本文介绍一段shell脚本,它可以检测某进程或某服务是否正在运行,然后以邮件通知.有需要的朋友参考下 一个简单的shell脚本,用来找出关键的服务是否正在运行,适用于Linux操作系统或Unix操作系 ...

  7. nginx在用户使用ie的使用重定向到/nginx-MSIE目录下

    [root@web01 ]# cat /app/server/nginx/conf/rewrite/default.conf #rewrite ^/index\.html /index.php las ...

  8. Mac下Selenium无法最大化Chrome解决方案

    在用Selenium做自动化操作时,一般最大化浏览器的代码都是:driver.manage().window().maximize(), 但是在Mac下这样是无法最大化Chrome浏览器的,解决方法: ...

  9. pycharm设置安装python第三方插件

    pycharm设置安装python第三方插件 转载于:https://www.mindg.cn/?p=80 今天下了一个pycharm,设置用它来安装python插件,以下是安装步骤,与大家分享,我的 ...

  10. MySQL 使用 SSL 连接(附 Docker 例子)

    查看是否支持 SSL 首先在 MySQL 上执行如下命令, 查询是否 MySQL 支持 SSL: mysql> SHOW VARIABLES LIKE 'have_ssl'; +-------- ...