在设计网页时,有时需要将输入框设置为只读状态,即其中的内容不可编辑,实现这种设计的方法有两种:
使用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. 摘:"error LNK2019: 无法解析的外部符号 该符号在函数 中被引用" 错误原因

    例如“error LNK2019: 无法解析的外部符号error LNK2001: 无法解析的外部符号“private: static struct _OVERLAPPED CUsbCom::g_Wr ...

  2. static 与单例模式、auto_ptr与单例模式、const 用法小结、mutable修饰符

    一.static 与单例模式 单例模式也就是简单的一种设计模式,它需要: 保证一个类只有一个实例,并提供一个全局访问点 禁止拷贝  C++ Code  1 2 3 4 5 6 7 8 9 10 11 ...

  3. java开源内容管理系统J4CMS支持真正静态化

    原理非常easy,使用httpclient请求遍历整个站点的菜单.文章链接.请求下来以后,生成html文件.即静态化了 把它们稍作调整,直接扔在88元购买的阿里云主机上.站点就完毕了 这是我的 静态站 ...

  4. js ~取非运算符的妙用,将-1转为0(或假值)

    典型的运用场景就是indexOf

  5. webpack One CLI for webpack must be installed. These are recommended choices, delivered as separate(webpack报错)

    用webpack 打包项目的时候:webpack js.js bundle.js 报错. 最近在安装好webpack后,使用时,提示 One CLI for webpack must be insta ...

  6. unity, 替换shader渲染(Rendering with Replaced Shaders)

    实现特效,尤其是一些后处理特效,经常需要将各物体的shader替换为另一套shader进行渲染到纹理,再后再进行合成或以某种叠加方式叠加到最后的画面上去. 再复杂一点儿的,可能不同的物体所用的替换sh ...

  7. Murano环境搭建、使用介绍和思考

      murano是OpenStack的Application Catalog服务.推崇AaaS(Anything-as-a-Service)的概念.通过统一的框架和API实现应用程序高速部署和应用程序 ...

  8. MySQL防止delete命令删除数据

    在sql中删除数据库中记录我们会使用到delete命令,这样如果不小心给删除了很难恢复了,总结一些删除数据但是不在数据库删除的方法. 方法一 我常用的做法,就是在数据库中加一个删除标识字段,如: is ...

  9. XCode5中新建工程后强制使用了ARC,如何去掉?

    打开你的工程,点击目录的工程文件,最顶端蓝色的,然后选择project下你的工程,还是蓝色那项,然后build Settings,然后往下拉,在Apple LLVM 5.0 - Language - ...

  10. 对称加密算法-DES以及DESede算法

    一.简述 对称加密算法就是能将数据加解密.加密的时候用密钥对数据进行加密,解密的时候使用同样的密钥对数据进行解密. DES是美国国家标准研究所提出的算法.因为加解密的数据安全性和密钥长度成正比.des ...