用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 相关文章推荐
Extjs学习笔记之九 数据模型(上)
Jan 11 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
Apr 02 Javascript
jQuery中extend函数详解
Feb 13 Javascript
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
小程序实现页面顶部选项卡效果
Nov 06 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
Aug 16 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 Javascript
javascript代码实现简易计算器
Jan 25 Javascript
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
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程序的方法小结
2012/02/23 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
nodejs文件操作模块FS(File System)常用函数简明总结
2014/06/05 NodeJs
AngularJS中取消对HTML片段转义的方法例子
2015/01/04 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
angular 内存溢出的问题解决
2018/07/12 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
python根据日期返回星期几的方法
2015/07/06 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
深入理解Python中装饰器的用法
2016/06/28 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
Python JSON编解码方式原理详解
2020/01/20 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
什么是测试驱动开发(TDD)
2012/02/15 面试题
无故旷工检讨书
2014/01/26 职场文书
家长会标语
2014/06/24 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
结婚堵门保证书
2015/05/08 职场文书