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" 背景变 灰色
随机推荐
- pip install mysql-connector 安装出错
一.MySQL Connector/Python 2.2.3 的变化: 之前 mysql 官方说MySQL Connector/Python 是纯python语言写的,但是呢! 这个问题在2.2.3中 ...
- Java类载入器(一)——类载入器层次与模型
类载入器 虚拟机设计团队把类载入阶段中的"通过一个类的全限定名来获取描写叙述此类的二进制字节流"这个动作放到Java虚拟机外部去实现.以便让应用程序自己决定怎样去获取所须要的类 ...
- Atitit. 解释器模式框架选型 and应用场景attilax总结 oao
Atitit. 解释器模式框架选型 and应用场景attilax总结 oao 1. 解释器模式结构描述 1 2. 如何实现(简单的解释器模式,仅仅通过词法分析即可实现,而无需token流进行处理. 2 ...
- Atitit. 解决unterminated string literal 缺失引号
Atitit. 解决unterminated string literal 缺失引号 原因:::或许string没使用引号括号起来...missingMessage缺失了一个单个的引号 Error: ...
- PCI & PCIE Configuration Register Space
1.PCI-Compatible Configurationbits [1:0] are hard-wired, read-only and must return zeros when read.b ...
- dom写xml
1.引入包 import xml.dom.minidom 2.writexml方法 writexml(writer, indent, addindent, newl, encoding) writer ...
- vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) var path = require('path') ...
- hadoop onekey_step2
#onekey_step2 # Rrogram: # 安装hadoop简易集群程序 # 使用说明 # History: # -- luoqi v0. release # email: # @qq.co ...
- java定时调度器解决方案分类及特性介绍
什么是定时调度器? 我们知道程序的运行要么是由事件触发的,而这种事件的触发源头往往是用户通过ui交互操作层层传递过来的:但是我们知道还有另外一种由机器系统时间触发的程序运行场景.大家想想是否遇到或者听 ...
- js获取textaera对象(object)的值
for(i in pstrWord ){ alert(i); //获得属性 alert(pstrWord[i]); //获得属性值 } 1.js输出object对象方法如下: function wri ...