用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系列(46):代码复用模式(推荐篇)详解
Mar 04 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
Mar 14 Javascript
jquery实现图片轮播器
May 23 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 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
最小化数据传输――在客户端存储数据
2006/10/09 PHP
php 数组的创建、调用和更新实现代码
2009/03/09 PHP
php实现memcache缓存示例讲解
2013/12/04 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
详解PHP对数组的定义以及数组的创建方法
2015/11/27 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
javascript prototype原型操作笔记
2009/12/07 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
Python实现的txt文件去重功能示例
2018/07/07 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
Django框架模型简单介绍与使用分析
2019/07/18 Python
python实现银行管理系统
2019/10/25 Python
基于python操作ES实例详解
2019/11/16 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
Python中有几个关键字
2020/06/04 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
简述 Python 的类和对象
2020/08/21 Python
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
什么是组件架构
2016/05/15 面试题
俄罗斯商务邀请函
2014/01/26 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书