最近在项目里面有一个编辑页面,一部分人可以编辑,一部分人只能查看,所以想实现只能查看的人 不能修改,已办的input和textarea 都有readonly属性,但是select却不行,在国内看了一些帖子的方案是:
onbeforeactivate="return false" onfocus="this.blur()" onmouseover="this.setCapture()" onmouseout="this.releaseCapture()"
兼容性存在问题,我无意见,在外国技术网站:http://stackoverflow.com上找到了我想要的答案,解决方案很简单,而且也没有兼容性问题:onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;"
Tested and working
in IE 6, 7 & 8b2,9, Firefox 2 & 3+, Opera 9.62, Safari 3.2.1 for Windows and Google Chrome.
基本上不会存在兼容问题,这里共享出来,让那些还在寻找解决方案的孩纸有个选择.
方案出自:http://stackoverflow.com/questions/368813/readonly-select-tag
发原创帖子不宜,实验方法更不易,还望转载时注明出处!
分享到：
相关推荐
这段JavaScript代码会在页面加载完成后，为所有`readonly`的`select`元素添加一个事件监听器，阻止它们的`mousedown`事件，从而防止下拉框弹出。 综上所述，要实现"下拉框设置为只读模式时不再弹出下拉框"的功能，...
【JS Select下拉框(支持输入模糊查询)】 在网页开发中，`<select>`元素通常用于创建下拉框，但原生的HTML `<select>`元素并不支持输入模糊查询功能。为了实现这一功能，我们需要利用JavaScript来扩展和增强下拉框的...
### 实现 Select 下拉选项可编辑 在网页开发过程中，我们经常会遇到需要用户进行选择的情况。传统的`<select>`元素可以很好地完成这项任务，但是它存在一个限制：用户只能从预定义的选项中进行选择而不能自定义输入...
然而，对于`<select>`、`<input type="checkbox">`和`<input type="radio">`，`readonly`属性并不起作用，通常需要使用`disabled`属性来达到类似的效果。然而，如前所述，`disabled`会导致数据无法提交，因此需要...
今天我们要来分享一款很实用的jQuery插件，它是一个基于jQuery多级联动的省市地区Select下拉框，并且值得一提的是，这款联动下拉框是经过自定义美化过的，外观比浏览器自带的要漂亮许多。另外，这个Select下拉框也...
在网页开发中，为了提升用户体验，常常需要实现一些高级交互功能，比如下拉框的模糊查询功能。这个功能允许用户在下拉框中输入部分文本，系统会自动匹配并显示与输入相匹配的选项，方便用户快速选择。下面将详细解释...
在使用Layui框架开发Web界面时，经常会遇到需要禁用select下拉框的场景，以防止用户点击或更改选项。Layui是一个前端UI框架，它提供了一套丰富的组件来简化前端开发过程。本文将详细介绍如何在Layui中实现select组件...
2. **切换编辑模式**：通过改变`<select>`的`readonly`或`disabled`属性，可以切换其编辑状态。 3. **监听事件**：使用`addEventListener()`绑定事件处理函数，如`onkeyup`事件用于捕获用户输入，`onclick`事件用于...
在网页开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件...3. 通过CSS控制样式，实现与原生`<select>`相似或独特的视觉效果。 4. 考虑性能和无障碍访问，确保模拟的效果在各种场景下都能良好运行。
最后，我们在`<body>`标签的`onload`事件中调用`init`函数，确保页面加载完成后执行`selectReadOnly`，将下拉框设置为只读状态。 通过这种方式，虽然select元素本身不具备只读特性，但我们利用JavaScript模拟了只读...
1：readonly是要锁定这个控件，通过在界面上无法修改他（但是通过javascript可以修改他）。 2：disabled 和readonly有相同的地方也是可以锁定这个控件用户不能改变他的值，但是disabled的更彻底一些...如select 下拉框
总结来说，使用jQuery可以方便地将input文本框模拟成select选择框，实现与真实下拉框类似的功能。这主要通过动态操作DOM、添加事件监听器以及使用插件来完成。在实际项目中，根据具体需求选择合适的方法，并注重用户...
"ul li 模拟省市区下拉框"是一种常见且实用的技术，它利用HTML的`<ul>`（无序列表）和`<li>`（列表项）元素来构建一个可交互的选择器，解决了原生`<select>`标签在样式自定义和美观上的局限性。 1. **使用场景**： ...
在实现过程中，通常会创建四个<select>元素，分别代表省、市、区、街道。每个<select>元素的选项初始为空，用户选择上一级后，通过AJAX请求获取并填充下一级的数据。这里，AJAX是异步 JavaScript 和 XML 的缩写，...
例如，如果表单中有`<select>`元素，用户在`readonly`状态下仍能更改选项，然后通过回车键提交表单，这可能会导致意外的结果。 最后，为了防止用户在网络状况不佳时反复提交表单，通常会在用户点击提交按钮后使用...
`MobileSelect` 将会管理select的整体行为，包括选中的值、是否禁用、样式以及弹出下拉框的逻辑。`MobileOption` 则是作为 `MobileSelect` 的子组件存在，代表每一个可选的条目。 我们首先需要定义 `MobileSelect` ...
在本示例中，我们将探讨如何使用jQuery和HTML `<ul>` 标签来模拟一个 `<select>` 下拉框，从而实现更加优雅的表单样式。 首先，jQuery是一种流行的JavaScript库，它简化了DOM操作、事件处理和Ajax交互等任务。在这...
通常，select下拉框和radio单选框等表单元素不显示的问题，是由于以下几个原因造成的： 1. 缺少必要的CSS和JavaScript文件引入。确保在HTML文件中正确引入了Layui的CSS和JS文件。 2. 组件没有被正确渲染。Layui的...
<input type="text" id="datePicker" readonly> ;"> ``` 接着，我们编写JavaScript代码来处理用户交互。使用`addEventListener`监听`click`事件，当用户点击日期输入框时，显示日历面板： ```javascript document....