HTML中Select不用Disabled实现ReadOnly的另类实现

最新推荐文章于 2020-10-12 14:40:47 发布
最新推荐文章于 2020-10-12 14:40:47 发布
阅读量116 收藏
点赞数
文章标签： HTML

[code]
<html>
<body>
<select onbeforeactivate="return false" οnfοcus="this.blur()" οnmοuseοver="this.setCapture()" οnmοuseοut="this.releaseCapt...
nishizhen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML中Select不用Disabled实现ReadOnly的效果
12-10
方法如下： 代码如下:<select onbeforeactivate=”return false” onfocus=”this.blur()” onmouseover=”this.setCapture()” onmouseout=”this.releaseCapture()”>   <option>1</option>  </select>
HTML中Select不用Disabled实现ReadOnly的另类方法
12-01 183
&lt;html&gt;&lt;body&gt;&lt;select onbeforeactivate="return false" onfocus="this.blur()" onmouseover="this.setCapture()"   onmouseout="this.releaseCapture()"&gt;     &lt;option&gt;1&am
disabled与readonly的作用及区别介绍
09-28
在网页开发中，`disabled` 和 `readonly` 是两个非常重要的属性，它们都用于限制用户对HTML表单元素的交互，但它们之间存在着显著的区别。接下来我们将深入探讨这两个属性的作用和差异。 首先，`readonly` 属性主要...
表单中Readonly和Disabled的区别详解
10-24
在HTML表单中，`readonly` 和 `disabled` 是两个重要的属性，它们都可以用来限制用户对表单元素的交互，但它们之间的区别在于作用范围、提交表单时的行为以及用户体验等方面。 首先，`readonly` 属性主要用于`...
html表单属性readonly和disabled的使用方法
09-28
这时，`readonly` 和 `disabled` 这两个属性就显得尤为重要。 1. **只读属性（readonly）** - `readonly` 属性用于设置表单元素为只读状态。这意味着用户可以看到元素中的文本，但不能修改它。当用户尝试改变只读...
antd的select不用disabled保留删除功能的别样“禁用”——隐藏下拉菜单
qq_40179700的博客
10-12 4737
最近在使用antd的select的组件时，需要用到多选框，需求时多选框的值不能从下来菜单式里取得，而是完全受控，且使用删除功能。 如果是单选框，那么使用disabled就可以禁用选择器。 但是使用多选框并想依旧使用多选的删除tag的功能时，使用disabled是不能满足的，而且disabled时的灰色样式也会影响整体展示。 这时就可以使用这个神奇的方法——隐藏下拉菜单（比你想象中的更加容易） 不需要自己去寻找下拉菜单的类名，api中早已给出答案，dropdownClassName。 <Select
不用disabled属性也让select失效
iteye_17979的博客
08-04 487
如何不用disable属性使select不能修改
cmtony2008的专栏
09-24 9360
 在JSP里面，控制页面的select选项不可更改。form action="tijiao.do" method="post" name="form1">    select size="1" ID="ti_record_type" NAME="ti_record_type" onChange="NoChangeRcd(this)">              
Select下拉框禁用的三种方式
热门推荐
qq_28332767的博客
07-25 4万+
1.为下拉框添加样式，可以禁用该下拉框： 特点：不会出现无法取值的问题 <select name="name"id="select" class="select" style="pointer-events: none;"></select> 2.为下拉框添加onfocus和onchange方法，可以禁用该下拉框： <selectname="name"i...
html select 标签使用disabled，但又要提交数据的解决
chyin1024的博客
11-30 1386
网上查了其他方法，说在提交表单前，将disables=false…… 但似乎不符合自己的需求…… 另想方法。。。。。。 分析： 用 select 表单，却又不用下拉选项功能，与input 类似。 解决： input + hidden 来作为select固定值的传递，将结果偷偷传回后台。（能实现，但这样的目的本身就显得臃肿，白白浪费了select）
开题报告宠物医院管理系统的设计与实现 已通过开题答辩的.docx
最新发布
07-25
随着人们生活水平的提高和精神需求的增加，宠物已经成为很多家庭的重要成员，宠物市场的规模和潜力也不断扩大。宠物医院作为宠物健康保障的重要机构，需要适应市场的发展和变化，提供更加专业和便捷的服务。宠物医院的业务和信息涉及多个方面，如科室信息、医生信息、坐诊信息、药品信息、挂号信息、网站公告信息等。如果采用传统的手工或半自动化的管理方式，会造成信息的分散、混乱、更新困难、查询不便等问题，影响管理的效率和质量。系统能够通过计算机技术和网络技术对宠物医院业务进行集中管理。它可以实现信息的录入、存储、查询、修改、删除、统计、分析、展示等功能，方便宠物医院的管理人员和工作人员进行业务操作和决策支持。宠物医院管理系统还可以利用网络技术，向宠物主人和宠物爱好者提供在线的服务和咨询，方便宠物主人和宠物爱好者了解和关爱自己的宠物，增强宠物医院的社会影响力和竞争力。综上所述，宠物医院管理系统是一个具有实际意义和应用价值的选题，它可以为宠物医院的管理和服务提供有效的支持，为宠物主人和宠物爱好者提供便捷的服务和咨询，为宠物的健康和福利做出贡献。
el-select 如何实现 readonly 效果
05-19
要实现 `el-select` 的 readonly 效果，可以通过以下两种方式之一： 1. 使用 `el-select` 的 `disabled` 属性，将其设置为 `true`，然后在 CSS 中添加样式覆盖默认的禁用样式。 ```html <el-select disabled class="readonly-select" v-model="value"> <el-option label="选项一" value="1"></el-option> <el-option label="选项二" value="2"></el-option> <el-option label="选项三" value="3"></el-option> </el-select> ``` ```css .readonly-select .el-input__inner { cursor: not-allowed; } ``` 2. 自定义 `el-select` 的模板，并在模板中禁用选择框的交互事件。 ```html <template> <el-select v-model="value"> <div class="el-input el-input--suffix readonly-select"> <input class="el-input__inner" type="text" :value="selectedLabel" readonly> <span class="el-input__suffix"> <i class="el-input__icon el-icon-arrow-up"></i> </span> </div> <el-option label="选项一" value="1"></el-option> <el-option label="选项二" value="2"></el-option> <el-option label="选项三" value="3"></el-option> </el-select> </template> <script> export default { data() { return { value: '', }; }, computed: { selectedLabel() { const selectedOption = this.$refs.select.selected; return selectedOption ? selectedOption.currentLabel : ''; }, }, mounted() { // 禁用选择框的交互事件 this.$refs.select.$el.querySelector('.el-input__inner').addEventListener('mousedown', (event) => { event.preventDefault(); }); }, }; </script> ``` 以上两种方式都可以实现 `el-select` 的 readonly 效果，具体选择哪种方式取决于你的需求和实际情况。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值