用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 相关文章推荐
JQuery中的ready函数冲突的解决方法
May 17 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
浅析$(function) ready和onload 的区别
Sep 03 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
React中的refs的使用教程
Feb 13 Javascript
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
JavaScript实现图片放大镜效果
Jun 27 Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
Feb 15 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
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
Node.js事件驱动
2015/06/18 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
react中fetch之cors跨域请求的实现方法
2018/03/14 Javascript
工作中常用到的ES6语法
2018/09/04 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
Python天气预报采集器实现代码(网页爬虫)
2012/10/07 Python
利用Python演示数型数据结构的教程
2015/04/03 Python
python实现汉诺塔递归算法经典案例
2021/03/01 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
python列表list保留顺序去重的实例
2018/12/14 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
金融行业务员的自我评价
2013/12/13 职场文书
火灾现场处置方案
2014/05/28 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
python numpy中setdiff1d的用法说明
2021/04/22 Python
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python