用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 hasFocus使用实例
Jun 29 Javascript
如何在MVC应用程序中使用Jquery
Nov 17 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
JS绘制微信小程序画布时钟
Dec 24 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
Sep 11 Javascript
js实现蒙版效果
Jan 11 Javascript
关于JavaScript中异步/等待的用法与理解
Nov 18 Javascript
基于angular实现树形二级表格
Oct 16 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中防止SQL注入最好的方法是什么
2013/06/10 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
在Python中使用HTML模版的教程
2015/04/29 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
彻底搞懂Python字符编码
2018/01/23 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
python实现祝福弹窗效果
2019/04/07 Python
python简单的三元一次方程求解实例
2020/04/02 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
学校运动会开幕演讲稿
2014/01/04 职场文书
机关财务管理制度
2014/01/17 职场文书
计算机系本科生求职信
2014/05/31 职场文书
公证书格式
2015/01/23 职场文书
消费者理赔投诉书
2015/07/02 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL