readonly 样式与disable效果一致

最新推荐文章于 2021-12-18 11:26:52 发布
最新推荐文章于 2021-12-18 11:26:52 发布
阅读量489 收藏
点赞数 1
文章标签： javascript css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41043580/article/details/112345659
版权
本文探讨了在HTML表单中，如何使用`readonly`属性实现类似`disabled`的效果，同时允许提交表单。通过设置`pointer-events:none`，可以阻止点击事件，但可能影响样式。为达到理想效果，建议结合使用CSS来调整样式，如`border:none;background:#fff;opacity:1;color:black;pointer-events:none;`。
摘要由CSDN通过智能技术生成

disable无法的input无法提交表单，如果想要效果和disable一致，还想提交到表单中，则使用readonly。但readonly的效果是还可以监听到点击事件，样式不好看，如果想把点击事件的监听去掉， style里配置  

pointer-events:none;

所有效果都不要的style配置：

style="border:none;background:#fff;opacity:1;color:black;pointer-events:none;"
muguo321
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Linux常用命令
学Java，找哪吒
05-31 6万+
Linux是我多年的心结，主要是因为工作中没有接触过，作为一个程序员，真的是奇葩，在我心里，Linux，有一种神秘感，总觉得熟练掌握Linux的都是大神，遥想当年，2019年11月份，我与公司的另一个资深员工（大概10年工作经验）去贵州出差，现场主要是Linux服务器操作，我是一脸蒙蔽，人家噼里啪啦一顿操作，搞定，我在一旁只能是羡慕嫉妒恨，也有另一种心情，因为不会，没活一身轻。
【数据库系统】RocksDB 极简教程
最新发布
程序员光剑
03-15 2万+
LevelDB 是一个google实现的非常高效的kv数据库，是典型的LSM-tree的实现。leveldb是一个写性能十分优秀的存储引擎，是典型的LSM树(Log Structured-Merge Tree)实现。LSM树的核心思想就是放弃部分读的性能，换取最大的写入能力。LSM树写性能极高的原理，简单地来说就是尽量减少随机写的次数。对于每次写入操作，并不是直接将最新的数据驻留在磁盘中，而是将其拆分成：（1）一次日志文件的顺序写（2）一次内存中的数据插入。
CSS：好玩的‘伪类’系列之——(:read-write与:read-only)
gavincz的博客
04-30 438
:read-write 定义：当一个元素（例如可输入文本的 input元素）可以被用户编辑时，修改样式。 触发条件：当一个元素是可编辑元素时，可以修改其样式 兼容：IE不支持 :read-only 定义：当一个可编辑元素（例如可输入文本的 input元素）不可被用户编辑，即只读时（具有readonly属性时），修改样式。 触发条件：只针对当一个可编辑元素被赋予readonly（只读）属...
css textarea readonly模拟disabled样式
zlt的博客
11-01 1494
IE下textarea设置disabled属性后，滚动条不能滚动，为解决该问题，使用readonly属性模拟disabled效果，css样式设置如下： textarea[readonly]{ background-color: #f5f5f5;/*背景色*/ color:#848484;/*字体颜色*/ border: 1px solid #d5d5d5;/*边框*/ cu...
为属性为readonly的input设置样式
lilywangcn
03-24 1908
      属性为readonly的input不允许用户输入内容，然而在ie或chrome中，属性为readonly的input 和一般input从界面上来看没有任何区别，会给用户输入带来稍许不便。可以通过为其设置css来加以区分。   在ie浏览器中： input{background-color:expression((this.readOnly && this.r...
readonly disable
LeehomeYU的专栏
11-16 333
转载地址：https://www.cnblogs.com/cuihongyu3503319/archive/2009/11/27/1611769.html Readonly和Disabled的区别(小技巧)   1.js中为disabled,C#中为Enabled 2.在js中为readOnly
textarea readonly模拟disabled样式
qq_42681355的博客
11-20 515
css textarea readonly模拟disabled样式 要实现在不可编辑状态下，侧滚动条仍可滚动。 实际上textarea设置disabled（不可编辑）属性后，光标无法focus，滚动条不能滚动，设为readonly后样式为可编辑样式，与期望的灰色不可编辑不符。 为解决该问题，使用readonly属性模拟disabled效果，css样式设置如下： textarea[readonly]{ background-color: #f5f5f5;/*背景色*/ color:#848484;
小记ios与android移动端input框disabled样式不一致问题
small-town
02-24 501
1. 情景描述 input框设置为disabled时在ios与android上样式不一致。 2. 问题追踪 坚持不懈地搜索以及测试，才发现根本问题在于：ios会在input框为disabled时做透明度的设置，所以无论怎么调整颜色，总会不太一样，以下为测试代码： <!DOCTYPE html> <html> <head> <meta charset="u...
HTML入门与进阶以及HTML5
热门推荐
wuyxinu的博客
12-12 38万+
目录 一、简介 1、前端开发最核心技术 （1）HTML是什么？ （2）CSS （3）JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、块元素和行内元素 (五)、练...
HTML&CSS的语法与使用
yequan634299391的博客
09-04 806
互联网原理 互联网原理：上网即请求数据 HTML：制作网页文件 上网时，用户通过客户端发送http请求到服务器，服务器端将对应请求找到后，通过http响应传给本地计算机，计算机加载网页 上网过程由实际的物理文件的传输 http协议 浏览过程 输入URL→DNS域名解析（浏览器无法直接通过域名发起请求，需要将域名解析为IP地址）→建立TCP链接→发送HTTP Request→Web服务器Nginx反向代理→应用服务器Servlet处理请求→关闭TCP链接→渲染响应页面 纯文本和超文本区别 定义：纯文本只包含文
QLineEdit的readonly、disable属性的区别
danshiming的博客
12-18 2978
readonly是只读属性，当该属性通过setReadOnly(true)设置为true后： 用户能把编辑框的文本复制到剪粘板。 如果编辑框的echoMode()属性是 Normal，编辑框还可以支持拖放操作。 编辑框光标不会显示。 在包含有编辑框的窗体上按tab键，能跳到编辑框控件上。 默认情况下，编辑框还是正常的白色显示。 该属性默认为false disable是禁用属性，当该属性设置为true后： 编辑框不支持剪粘板。 编辑框不支持拖放操作。 编辑框光标不会显示。 在包...
css readOnly 和 disabled 属性使用
Wang_Zhong_2018的博客
09-05 806
1.表单中readOnly和disabled的区别：ReadOnly只针对input(text/ password)和textarea有效，而disabled对于所有的表单元素都有效，包括select,radio, checkbox, button等。disabled属性不能提交参数 2.两种方法设置disabled属性 $('#areaSelect').attr("disabled",t...
readonly与disabled
weixin_30457551的博客
02-05 74
readonly与disabled都能将元素设为不可编辑状态，但他们有许多区别: 1.样式 readonly与一般样式一样，disabled会将元素背景设为灰色 2.应用范围 readonly只对input(text/password)和textarea有效，disabled对所有表单元素都有效(包括select，radio，button，checbox等) 3.submit提交 将元...
jquery设置readonly文本框样式
jslfl的专栏
09-09 643
$(function(){ $("input[type='text'][readonly='readonly']").each(function (){ this.css("bacolor","red"); }); }) 还没有测试过... :oops:
修改readonly和disabled的样式
高振的博客
09-22 4162
#endDate:read-only{     cursor:pointer; } #endDate:disabled{     cursor:not-allowed; }
动态改变样式，如，readOnly, display
小樓東風的专栏
10-21 3986
 1.    readOnly =true/ false ， 是html中的感念。切记在脚本中readOnly的O一定要大写 ，恢复只用把该属性设置为 false。  display， CSS中的display的默认值是"inline"。style="display:"";" // 正常显示对象，与未加display一样。// 增加HTML属性。"   document.g
Css Style 里ReadOnly的设置
天下无双
11-20 8683
 Css Style 里ReadOnly的设置 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->readonly:expression(this.readOnly=true);
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值