有个项目需求是正常显示时为只读,不可修改;

点击修改按钮后,可修改表单元素。

首先想到的是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属性在各浏览器中的区别的更多相关文章

  1. 解决td标签上的position:relative属性在各浏览器中的兼容性问题

    在css中的position属性规定了页面元素的定位类型,它有以下几个值: absolute:绝对定位,相对于static以外的第一个父元素进行定位: fixed:生成绝对定位的元素,相对于浏览器窗口 ...

  2. jquery中document.ready在两类浏览器中的区别[转]

    DOMready的构建方法不再重复,现代浏览器通过DOMContentLoaded来实现,IE通过readystatechange+doScroll来模拟该方法. 类似jquery中的document ...

  3. HTML5新属性在Google浏览器中不能显示的问题

    这两天在学习HTML5新属性时遇到了如下问题,很是不解: 例如在学习使用canvas时,需要绘制一个红色的原点,代码如下: <!DOCTYPE HTML> <html> < ...

  4. 如何解决inline和linline-block在浏览器中的间距问题

    写页面时,如果想要元素从左到右排列,但又不想使用浮动,那么很多人都会用到display:inline或者display:inline-block. 但是每次一用到这个两个属性,浏览器中浏览的时候就会有 ...

  5. 【ASP.NET Core】EF Core - “影子属性” 深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 1

    [ASP.NET Core]EF Core - “影子属性”   有朋友说老周近来博客更新较慢,确实有些慢,因为有些 bug 要研究,另外就是老周把部分内容转到直播上面,所以写博客的内容减少了一点. ...

  6. ios端的Safari浏览器中,输入框加入readonly之后,点击还能获取焦点的解决办法。

    事情的起因是,新增一个需求,原来的输入框点击不要出现系统自带的键盘,出现我们模拟的键盘.如果是一次性开发的话, 我肯定把这个输入框写成一个div或者其他的元素,然后点击之后出现我们的模拟键盘,这样就不 ...

  7. input文本框禁止修改文本——disabled和readonly属性的作用及区别

    1.input文本框禁止修改文本 disabled属性:<input type="text" name="name" value="xxx&qu ...

  8. 在IE8等不支持placeholder属性的浏览器中模拟placeholder效果

    placeholder是一个很有用的属性,可以提示用户在input框中输入正确的内容,但是IE8以及IE8一下的浏览器不支持该属性,我们可以使用js来模拟相似的效果.下面直接上代码: <!doc ...

  9. Java中反射机制和Class.forName、实例对象.class(属性)、实例对象getClass()的区别

    一.Java的反射机制   每个Java程序执行前都必须经过编译.加载.连接.和初始化这几个阶段,后三个阶段如下图:   其中

随机推荐

  1. FileOutputStream字节输出流和FileInputStream输入流(切记:out是输出到本地中,in是输入到程序中)这里介绍大文件和小文件的读取方式

    //FileOutputStream public class FileOutputStreamDemo { /**字节流:适用于任何文件,以字节为单位,进行读写操作  *字节流操作步骤:  *1.创 ...

  2. MVC 控制器

    ASP.NET MVC控制器(一) 前言 在路由的篇章中讲解了路由的作用,讲着讲着就到了控制器部分了,从本篇开始来讲解MVC中的控制器,控制器是怎么来的?MVC框架对它做了什么?以及前面有的篇幅所留的 ...

  3. Ubuntu下安装Pyqt4

    确保系统中安装有python之后,在终端输入: sudo apt-get install libxext6 libxext-dev libqt4-dev libqt4-gui libqt4-sql q ...

  4. MVVM框架avalon在兼容旧式IE

    迷你MVVM框架avalon在兼容旧式IE做的努力 当前标签: avalon 共3页: 1 2 3 下一页  迷你MVVM框架avalon在兼容旧式IE做的努力 司徒正美 2014-03-13 11: ...

  5. 应用facebook .net sdk

    1.本博客主要介绍如何应用facebook .net SDK,实现发帖.点赞.上传照片视频等功能,更多关于facebook API,请参考:https://developers.facebook.co ...

  6. windbg Symbol file path

    SOS是一个调试器扩展,用于调试.NET应用程序.它提供了一组非常丰富的命令,这些命令使开发人员可以对CLR进行深入分析,并且有助于找出应用程序中各种复杂错误的原因.   由于SOS能够提供CLR内部 ...

  7. [转]Disabling ASLR on individual iOS applications when using iOS 6.0.1

    ASLR: Address Space Layout Randomization 查看应用是否进行了 ASLR 保护的方法:otool -hv ${File-Path} I recently enco ...

  8. CSS sprites减少HTTP请求

    使用CSS sprites减少HTTP请求   sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉很简单的东西,作用却很大 神马是CSS 小妖精 C ...

  9. 使用C++做算法时,对内存的管理的办法

    使用C++做算法时,对内存的管理的办法 最近老是在想C++的内存控制机制,查了一些资料所以有点想法,自己记录一下免得以后自己忘了. 1. 需求 在做线性代数的算法时,首要的就实现Matrix这个类.由 ...

  10. ICMP:internet 控制报文协议

    ICMP:internet 控制报文协议 1.概述      ICMP是(Internet Control Message Protocol)Internet控制报文协议.它是TCP/IP协议族的一个 ...