Readonly和disabled的区别 display:none和visible:hidden的区别
怎样使input中的内容为只读,也就是说不让用户更改里面的内容。
<input type="text" name="input1" value="中国" />
<input type="text" name="input1" value="中国" readonly />
<input type="text" name="input1" value="中国" disabled />
最好不要用disabled,不然就无法取出里面的值了.
<input type="text" name="input1" value="中国" readonly="true" />
<input type="text" name="input1" value="中国" readonly />
区别:
1. disabled -- 完全不可编辑,并且是不能复制的
2.readonly -- 不可编辑,但是是可以复制。
3.Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,包括select, radio, checkbox, button等。
4.表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去
1)首先说明的是display:none和visible:hidden都能够实现将网页上某个元素隐藏起来。
(2)如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏,载入页面后,在没有通过js设置样式使元素显示的前提下,使用js代码会无法正确获得该元素的一些属性,比如offSetTop,offSetLeft等,返回的值会为0,通过js设置style.display来使元素显示后才能正确获得这些值。
(3)使用display:none隐藏的元素不会被百度等搜索网站检索,会影响到网站的SEO,某些情况下可以使用left:-100000px来达到同样效果。
(4)如果是通过样式文件或<style>css</style>方式来设置元素的display:none样式,用js设置style.display=""并不能使元素显示,可以使用block或inline等值来代替。通过style="display:none"直接在元素上进行的设置不会有这个问题。
(5)将元素设置为display:none将不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。而将元素设置为visibility:hidden则仅使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到。
(1)Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容。
(2)在disabled和readonly这两个属性都设置为true的情况下,form属性将不能被编辑。
(3)如果一个输入项的disabled设为true,则该表单输入项不能获取焦点,用户的所有操作(鼠标点击和键盘输入等)对该输入项都无效。而readonly只是针对文本输入框这类可以输入文本的输入项,如果设为true,用户只是不能编辑对应的文本,但是仍然可以聚焦焦点。
(4)Readonly只针对input(text / password)和textarea有效,而disabled对于html中所有的表单元素都有效,但是在表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交之后,这个元素的值不会被提交,而被设置为readonly的表单元素的值还是会被提交的。 一般比较常用的情况是:
(1)在某个表单中为用户预填了某个唯一识别代码,不允许用户改动,但是在提交时需要传递该值,此时应该将它的属性设置为readonly 。
(2)经常遇到当用户正式提交了表单后需要等待管理员的信息验证,这就不允许用户再更改表单中的数据,而是只能够查看,由于disabled的作用元素范围大,所以此时应该使用disabled,但同时应该注意的是要将submit button也disabled掉,否则只要用户按了这个按钮,如果在数据库操作页面中没有做完整性检测的话,数据库中的值就会被清除。如果说在这种情况下用readonly来代替disabled的话,若表单中只有input(text / password)和textarea元素,那还是可以的,如果存在其他发元素,比如select,用户可以在重新改写值后按回车键进行提交(回车是默认的submit触发按键) 。
(3)我们常常在用户按了提交按钮后,利用 javascript 将提交按钮disabled掉,这样可以防止网络条件比较差的环境下,用户反复点提交按钮导致数据冗余地存入 数据库
Readonly和disabled的区别 display:none和visible:hidden的区别的更多相关文章
- display:none与visible:hidden的区别 slideDown与
display:none与visible:hidden的区别 display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被 ...
- display:none与visible:hidden的区别
display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就 ...
- CSS中:display:none与visible:hidden的区别
display:none视为不存在且不加载,即,不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失. visibility:hidden隐藏,但在浏览时保留位置,即,使对象在网页上不可见,但该对 ...
- 个人收集(转载)CSS中 display:none和visibility:hidden的区别
visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏 ...
- display:none;与visibility:hidden;的区别
visibility:隐藏对应的元素但不挤占该元素原来的空间.display:隐藏对应的元素并且挤占该元素原来的空间. 下面来看visibility和dispaly的一些参数 visibility用来 ...
- display:none与visible:hidden区别
if(list.style.display=='none'){ list.style.display='block'; }else{ ...
- display:none和visible:hidden两者的区别
display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别:display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是 ...
- display:none和visibility:hidden的区别?
css控制元素不可见的方法 { display: none; /* 不占据空间,无法点击 */ } /************************************************* ...
- 前端面试题-display:none和visibility:hidden的区别
一.display:none和visibility:hidden的区别 1.1 空间占据 1.2 回流和渲染 1.3 株连性 二.空间占据 display:none 隐藏后的元素不占据任何空间,而 v ...
随机推荐
- python模块(sys)
SYS模块 sys.argv # 命令行参数List,第一个元素是程序本身路径 sys.exit(n) # 退出程序,正常退出时exit(0) sys.version # 获取Python解释程序的版 ...
- 读取plist
- (NSArray *)imageData { if (_imageData == nil) { // 从未初始化 // 初始化数据 // File : 全路径 // NSBundle : 一个NS ...
- 从零开始PHP攻略(2)——操作符与迭代整理
目录: 10.操作符整理 11.表单计算代码 12.优先级与结合性 13.可变函数 14.条件判断 15.循环迭代 16.跳出控制 17.可替换的控制结构 10.操作符 10.1 算术操作符 算术操作 ...
- object_id的用法
OBJECT_ID: 返回数据库对象标识号. 语法 OBJECT_ID ( 'object' ) 参数 'object' 要使用的对象.object 的数据类型为 char 或 nchar.如果 ob ...
- 在Swift中整数以及浮点的格式化
1 整数的格式化 有的时候我们需要将整数输出为类似01,02,001,002这样的格式. 那么在swift中我们可以这样写 let i= let str = String(format:"% ...
- PostgreSQL Replication之第十一章 使用Skytools(3)
11.3 管理 pgq-queues Skytools 的一个核心组件是pgq.它提供了一个通用排队接口,它可以让您把消息从一个消息提供者传送到一个任意数目的接收者. 现在的问题是:一般来说,一个队列 ...
- Codeforce Round #225 Div2
这回的C- -,弄逆序,我以为要弄个正的和反的,没想到是等价的,弄两个还是正确的,结果我又没注意1和0只能指1个方向,结果弄了4个,取了4个的最小值就错了,自己作死没弄出来...,后面又玩去了...哎 ...
- javascript 一些常用的验证
只能输入数字 onkeyup="this.value=this.value.replace(/[^\d]/g,'')" onafterpaste="th ...
- linux第12天 线程
今天主要学习了共享内存,信号量的封装,还有线程. POSIX线程库 与线程有关的函数构成了一个完整的系列,绝大多数函数的名字都是以“pthread_”打头的 要使用这些函数库,要通过引入头文<p ...
- c#经典俄罗斯方块 vs2012开发
把网上两个开源的俄罗斯方块,整合到一起了,开发环境vs2012+.net 4.0,有问题.建议可以加群沟通哦 复古的 c#写的一个俄罗斯方块小游戏,友好的人机交互,具体功能如下: 1.游戏分七个关卡, ...