编程 Javascript

用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"); 
}

做到这里大功告成，试试效果吧！！！

用js设置下拉框为只读的小技巧

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript高级程序设计阅读笔记（十八） js跨平台的事件

Aug 14 Javascript

js 窗口抖动示例

Sep 04 Javascript

jquery实现textarea 高度自适应

Mar 11 Javascript

javascript继承的六大模式小结

Apr 13 Javascript

JS和css实现检测移动设备方向的变化并判断横竖屏幕

May 25 Javascript

js实现浮动在网页右侧的简洁QQ在线客服代码

Sep 04 Javascript

利用js+css+html实现固定table的列头不动

Dec 08 Javascript

jQuery日程管理控件glDatePicker用法详解

Mar 29 jQuery

浅谈vue的踩坑路

Aug 31 Javascript

es6基础学习之解构赋值

Dec 10 Javascript

jQuery实现的五星点评功能【案例】

Feb 18 jQuery

Vue双向数据绑定(MVVM)的原理

Oct 03 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

linux系统下php安装mbstring扩展的二种方法

2014/01/20 PHP

PHP基于递归算法解决兔子生兔子问题

2018/05/11 PHP

php往mysql中批量插入数据实例教程

2018/12/12 PHP

简单实用的PHP文本缓存类实例

2019/03/22 PHP

TFDN图片播放器不错自动播放

2006/10/03 Javascript

innerText和innerHTML 一些问题分析

2009/05/18 Javascript

jQuery页面滚动浮动层智能定位实例代码

2011/08/23 Javascript

jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)

2013/01/15 Javascript

js opener的使用详解

2014/01/11 Javascript

js实现下拉列表选中某个值的方法(3种方法)

2015/12/17 Javascript

深入浅析JavaScript中的constructor

2016/04/19 Javascript

非常漂亮的相册集使用jquery制作相册集

2016/04/28 Javascript

JavaScript运动框架链式运动到完美运动（五）

2017/05/18 Javascript

使用 Node.js 对文本内容分词和关键词抽取

2017/05/27 Javascript

JS实现利用两个队列表示一个栈的方法

2017/12/13 Javascript

解决angular双向绑定无效果,ng-model不能正常显示的问题

2018/10/02 Javascript

[03:26]《DAC最前线》之EG经理自述DOTA2经历

2015/02/02 DOTA

[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20

2020/12/23 DOTA

python Django模板的使用方法（图文）

2013/11/04 Python

python冒泡排序算法的实现代码

2013/11/21 Python

Python 序列化 pickle/cPickle模块使用介绍

2014/11/30 Python

在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程

2015/04/25 Python

搭建Python的Django框架环境并建立和运行第一个App的教程

2016/07/02 Python

python模拟事件触发机制详解

2018/01/19 Python

python查询mysql,返回json的实例

2018/03/26 Python

Django 外键的使用方法详解

2019/07/19 Python

python多线程实现同时执行两个while循环的操作

2020/05/02 Python

python boto和boto3操作bucket的示例

2020/10/30 Python

英国第一的购买便宜玩具和游戏的在线购物网站：Bargain Max

2018/01/24 全球购物

移动通信专业自荐信范文

2013/11/12 职场文书

十佳标兵事迹材料

2014/08/18 职场文书

绿色环保倡议书

2015/04/28 职场文书

校园之声广播稿

2015/08/18 职场文书

python基础之错误和异常处理

2021/10/24 Python

如何避免mysql启动时错误及sock文件作用分析

2022/01/22 MySQL

Apache SeaTunnel实现非CDC数据抽取

2022/05/20 Servers