用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 在各个浏览器中执行的耐性
Apr 06 Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
浅谈vue项目重构技术要点和总结
Jan 23 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
jQuery Migrate 插件用法实例详解
May 22 jQuery
JS实现动态添加外部js、css到head标签的方法
Jun 05 Javascript
vue data引入本地图片的两种方式小结
Nov 13 Javascript
Vue自定义全局弹窗组件操作
Aug 11 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字符编码转换之gb2312转为utf8
2013/10/28 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
jquery教程ajax请求json数据示例
2014/01/13 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
javascript操作字符串的原生方法
2014/12/22 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
深入理解NumPy简明教程---数组2
2016/12/17 Python
详解tensorflow实现迁移学习实例
2018/02/10 Python
Python中new方法的详解
2019/01/15 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
python搜索包的路径的实现方法
2019/07/19 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
Python对excel的基本操作方法
2021/02/18 Python
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
党校培训自我鉴定
2014/02/01 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
小学校本培训方案
2014/06/06 职场文书
2014年药房工作总结
2014/11/22 职场文书
项目投资意向书范本
2015/05/09 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
A22国内电台短波广播频率表
2022/05/10 无线电