用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 相关文章推荐
json 定义
Jun 10 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
js数组与字符串的相互转换方法
Jul 09 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
Vue实现一个无限加载列表功能
Nov 13 Javascript
详解新手使用vue-router传参时注意事项
Jun 06 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正则preg_replace_callback函数用法实例
2015/06/01 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
jQuery 使用手册(三)
2009/09/23 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
js实现动态添加上传文件页面
2018/10/22 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
python黑魔法之参数传递
2016/02/12 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
python mysql断开重连的实现方法
2019/07/26 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
python中time、datetime模块的使用
2020/12/14 Python
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
Java中compareTo和compare的区别
2016/04/12 面试题
EJB面试题
2015/07/28 面试题
环境工程大学生自荐信
2013/10/21 职场文书
承认错误的检讨书
2014/01/30 职场文书
活动总结范文
2014/08/30 职场文书
中学生逃课检讨书
2015/02/17 职场文书
SpringBoot整合JWT的入门指南
2021/06/29 Java/Android
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis