用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对象的函数
Dec 22 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
屏蔽script注入小例子
Nov 12 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
jquery ui resize 中border-box的bug修正
Apr 26 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
jQuery Ajax页面局部加载方法汇总
Jun 02 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 Javascript
JavaScript数据结构学习之数组、栈与队列
May 02 Javascript
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
Nov 28 Javascript
Vue自定义指令实现checkbox全选功能的方法
Feb 28 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+java实现自动新闻滚动窗口
2006/10/09 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
Vue中使用Sortable的示例代码
2018/04/07 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
vee-validate vue 2.0自定义表单验证的实例
2018/08/28 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
python人人网登录应用实例
2014/09/26 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
python 实现生成均匀分布的点
2019/12/05 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
美国糖果店:Sugarfina
2019/02/21 全球购物
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
毕业生自我鉴定
2013/11/05 职场文书
招商经理岗位职责
2013/11/16 职场文书
投标邀请书范文
2014/01/31 职场文书
安全生产责任书
2014/03/12 职场文书
自强之星事迹材料
2014/05/12 职场文书
公证委托书格式
2014/09/13 职场文书
学习作风建设心得体会
2014/10/22 职场文书
大学生实训报告总结
2014/11/05 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书