用js设置下拉框为只读的小技巧


Posted in Javascript onApril 10, 2014

在项目开发过程中我们时常会碰到要设置下拉框为只读(readonly),但是可惜的是select没有只读属性,所以需要在select外面包含一个span,通过js来改变。

下面这段html代码是在struts2的下拉标签中加入了span标签,在页面装载的时候就让下拉框变成不可读。

<body onload="init()"> 
<span id="id_select"> 
<s:select name="sjdwmc" list="sjdxdwList" listKey="dxbh" listValue="dwmc" headerKey="" headerValue=""></s:select> 
</span> 
</body>

如下是js代码,在init方法中调用selectReadOnly让下拉框变成只读。
/*根据页面上span的id设置select为只读/ function selectReadOnly(selectedId){ 
var obj = document.getElementById(selectedId); 
obj.onmouseover = function(){ 
obj.setCapture(); 
} 
obj.onmouseout = function(){ 
obj.releaseCapture(); 
} 
obj.onfocus = function(){ 
obj.blur(); 
} 
obj.onbeforeactivate = function(){ 
return false; 
} 
} 
function init(){ 
selectReadOnly("id_select"); 
}

做到这里大功告成,试试效果吧!!!
Javascript 相关文章推荐
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
jquery ui对话框实例代码
May 10 Javascript
javascript中的previousSibling和nextSibling的正确用法
Sep 16 Javascript
js+css绘制颜色动态变化的圈中圈效果
Jan 27 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
Jan 18 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 Javascript
js获取上传文件大小示例代码
Apr 10 #Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 #Javascript
js实现图片旋转的三种方法
Apr 10 #Javascript
javascript:void(0)的问题使用探讨
Apr 10 #Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 #Javascript
php的文件上传入门教程(实例讲解)
Apr 10 #Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 #Javascript
You might like
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
列举PHP的Yii 2框架的开发优势
2015/07/03 PHP
php阿拉伯数字转中文人民币大写
2015/12/21 PHP
详解php 使用Callable Closure强制指定回调类型
2017/10/26 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
2013/03/21 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
wxpython学习笔记(推荐查看)
2014/06/09 Python
Python中的descriptor描述器简明使用指南
2016/06/02 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
python中requests库session对象的妙用详解
2017/10/30 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
python绘制圆柱体的方法
2018/07/02 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
python pytest进阶之fixture详解
2019/06/27 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
中间件的定义
2016/08/09 面试题
2015年审计人员工作总结
2015/05/26 职场文书
酒店温馨提示语
2015/07/14 职场文书
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python