用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 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
Javascript如何实现双指控制图片功能
Feb 25 Javascript
vue+element实现图片上传及裁剪功能
Jun 29 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 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调用时间格式的参数详解
2013/06/06 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
PHP实现图片压缩
2020/09/09 PHP
PHP函数积累总结
2019/03/19 PHP
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
全国优秀辅导员事迹材料
2014/05/14 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
医药销售自我评价200字
2014/09/11 职场文书
运动会闭幕式致辞
2015/07/29 职场文书