用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的一些看法
May 27 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 Javascript
详解微信小程序调起键盘性能优化
Jul 24 Javascript
js核心基础之闭包的应用实例分析
May 11 Javascript
react中的DOM操作实现
Jun 30 Javascript
Vue图片裁剪组件实例代码
Jul 02 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
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
python实现各进制转换的总结大全
2017/06/18 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
python中adb有什么功能
2020/06/07 Python
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
一个C/C++编程面试题
2013/11/10 面试题
小学班主任寄语大全
2014/04/04 职场文书
网络优化专员求职信
2014/05/04 职场文书
护士求职信范文
2014/05/24 职场文书
人力资源求职信
2014/05/25 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL