用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 相关文章推荐
取得一定长度的内容,处理中文
Dec 20 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
Jul 17 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
JS中offset和匀速动画详解
Feb 06 Javascript
关于Vue在ie10下空白页的debug小结
May 02 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
vue实现简单数据双向绑定
Apr 28 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中文件缓存转内存缓存的方法
2011/12/06 PHP
php实现文件下载功能的几个代码分享
2014/05/10 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
Angularjs实现多图片上传预览功能
2018/07/18 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
python获取一组汉字拼音首字母的方法
2015/07/01 Python
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
python 生成图形验证码的方法示例
2018/11/11 Python
python中partial()基础用法说明
2018/12/30 Python
Django实现学员管理系统
2019/02/26 Python
微信小程序python用户认证的实现
2019/07/29 Python
Python项目跨域问题解决方案
2020/06/22 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
一套Delphi的笔试题一
2016/02/14 面试题
工程预算与管理应届生求职信
2013/10/06 职场文书
青年创业培训欢迎词
2014/01/08 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
教师教育心得体会
2016/01/19 职场文书
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android
Django框架模板用法详解
2022/06/10 Python
Python使用plt.boxplot()函数绘制箱图、常用方法以及含义详解
2022/08/14 Python