readonly属性在各浏览器中的区别
有个项目需求是正常显示时为只读,不可修改;
点击修改按钮后,可修改表单元素。
首先想到的是readonly属性,其用于规定输入字段为只读,不能修改。在javascript中消除readonly值,可将输入字段切换为可编辑状态。如下面的写法
<input type="text" name="email" readonly="readonly">
写完后在浏览器中测试时发现如下:
IE浏览器:可以获得焦点,光标可进入,但不能输入。获得焦点时按下Backpace键,页面会后退跳转。
Firefox浏览器:可获得焦点,光标可进入,但不能输入。获得焦点时按下Backpace键,不起任何作用。
Chrome浏览器:可以获得焦点,光标不可进入。
考虑到上面的差异,最后放弃了readonly属性,采用disable属性方法。注意只要有disabled关键字即有效,可以不赋值,甚至赋值为空或false都表示disabled有效。
<input type="text" name="email" disabled="disabled">
在css中增加如下样式
input[disabled]{
pointer-events: none;
cursor: not-allowed;
}
若要切换input的可编辑状态,在javascript中写如下代码。注意用的attr()方法,不是prop()方法。
$('input').attr("disabled", false);//可编辑
$('input').attr("disabled", true);//不编辑
在各浏览器中测试样式均为:鼠标不可进入。用户体验更好些。
readonly属性在各浏览器中的区别的更多相关文章
- 解决td标签上的position:relative属性在各浏览器中的兼容性问题
在css中的position属性规定了页面元素的定位类型,它有以下几个值: absolute:绝对定位,相对于static以外的第一个父元素进行定位: fixed:生成绝对定位的元素,相对于浏览器窗口 ...
- jquery中document.ready在两类浏览器中的区别[转]
DOMready的构建方法不再重复,现代浏览器通过DOMContentLoaded来实现,IE通过readystatechange+doScroll来模拟该方法. 类似jquery中的document ...
- HTML5新属性在Google浏览器中不能显示的问题
这两天在学习HTML5新属性时遇到了如下问题,很是不解: 例如在学习使用canvas时,需要绘制一个红色的原点,代码如下: <!DOCTYPE HTML> <html> < ...
- 如何解决inline和linline-block在浏览器中的间距问题
写页面时,如果想要元素从左到右排列,但又不想使用浮动,那么很多人都会用到display:inline或者display:inline-block. 但是每次一用到这个两个属性,浏览器中浏览的时候就会有 ...
- 【ASP.NET Core】EF Core - “影子属性” 深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 1
[ASP.NET Core]EF Core - “影子属性” 有朋友说老周近来博客更新较慢,确实有些慢,因为有些 bug 要研究,另外就是老周把部分内容转到直播上面,所以写博客的内容减少了一点. ...
- ios端的Safari浏览器中,输入框加入readonly之后,点击还能获取焦点的解决办法。
事情的起因是,新增一个需求,原来的输入框点击不要出现系统自带的键盘,出现我们模拟的键盘.如果是一次性开发的话, 我肯定把这个输入框写成一个div或者其他的元素,然后点击之后出现我们的模拟键盘,这样就不 ...
- input文本框禁止修改文本——disabled和readonly属性的作用及区别
1.input文本框禁止修改文本 disabled属性:<input type="text" name="name" value="xxx&qu ...
- 在IE8等不支持placeholder属性的浏览器中模拟placeholder效果
placeholder是一个很有用的属性,可以提示用户在input框中输入正确的内容,但是IE8以及IE8一下的浏览器不支持该属性,我们可以使用js来模拟相似的效果.下面直接上代码: <!doc ...
- Java中反射机制和Class.forName、实例对象.class(属性)、实例对象getClass()的区别
一.Java的反射机制 每个Java程序执行前都必须经过编译.加载.连接.和初始化这几个阶段,后三个阶段如下图: 其中
随机推荐
- DDD 应对具体业务场景,Domain Model 重新设计
DDD 应对具体业务场景,Domain Model 重新设计 写在前面 上联:no zuo no die why you try 下联:no try no high give me five 横批: ...
- Node填坑教程——常用库
作为函数式编程来说,流程控制和函数库是必不可少的(应该吧). 下面我们介绍两个常用的库. lodash:完整的api请参阅,https://lodash.com/docs.这里我们只演示几个简单的例子 ...
- Java(5/6和8)中interface和Abstract Class
这篇文章主要是自己在使用java的过程中对自己一些之前常困惑的问题的一些总结. 正如题目所言,这篇博客主要是讨论java中的接口与抽象类的区别,有自己的使用心得,以及自己平时在使用的过程中遇到的问题及 ...
- c#中关于String、string,Object、object,Int32、int
在java中,string和String有着明显的区别,后者就是前者的一个封装.在c#中,好像是通用的,大部分情况下,两者互换并不会产生问题.今天特意查了一下资料,了解了一下两者的关系. 简单的讲,S ...
- iOS基础 - UITableView的数据源和代理
一.UITableView的代理方法 #pragma mark 每一行的高度 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtI ...
- asp.net 加入验证码
验证码生成页面代码(清理掉没用的html) using System; using System.Collections.Generic; using System.Linq; using Syste ...
- jquery 实现飘落效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ShardedJedis实现学习
ShardedJedis实现学习-我们到底能走多远系列(33) 我们到底能走多远系列(31) 扯淡: 工作是容易的赚钱是困难的 恋爱是容易的成家是困难的 相爱是容易的相处是困难的 决定是容易的可是等待 ...
- IE11仿真文档模式默认IE5 IE7的调整办法
<meta http-equiv="X-UA-Compatible" content="IE=edge">
- asp.net MVC 路由机制 Route
1:ASP.NET的路由机制主要有两种用途: -->1:匹配请求的Url,将这些请求映射到控制器 -->2:选择一个匹配的路由,构造出一个Url 2:ASP.NET路由机制与URL重写的区 ...