用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利用正则表达式去除日期中的-
Jun 09 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 Javascript
zepto.js 实时监听输入框的方法
Dec 04 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
详解小程序input框失焦事件在提交事件前的处理
May 05 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
node crawler如何添加promise支持
Feb 01 Javascript
vue 自定义组件添加原生事件
Apr 21 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
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
PHP整合PayPal支付
2015/06/11 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
python文件操作整理汇总
2014/10/21 Python
深入浅析Python中的yield关键字
2018/01/24 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
什么是python的必选参数
2020/06/21 Python
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
如何做好总经理助理
2013/11/12 职场文书
医院总经理职责
2013/12/26 职场文书
地球一小时宣传标语
2014/06/24 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
公司授权委托书样本
2014/09/15 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
城管个人总结
2015/02/28 职场文书
大学新生入学感想
2015/08/07 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python