用js設置下拉框為只讀的小技巧
更新時間：2014年04月10日 15:35:45 作者：
select沒有只讀屬性，所以需要在select外面包含一個span，通過js來改變,需要的朋友可以參考下
在項目開發(fā)過程中我們時常會碰到要設置下拉框為只讀（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讓下拉框變成只讀。
/*根據(jù)頁面上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");
}
做到這里大功告成，試試效果吧?。?！
下面這段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讓下拉框變成只讀。
復制代碼 代碼如下:
/*根據(jù)頁面上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");
}
做到這里大功告成，試試效果吧?。?！
相關文章
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)翻牌抽獎動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
本篇文章主要介紹了微信小程序實現(xiàn)圖片懶加載的示例代碼，實現(xiàn)的原理是通過頁面預加載圖片，對用戶體驗度會有一定的提高，具有一定的參考價值，有興趣可以了解一下2017-12-12![用xhtml+css寫的相冊自適應 - 類似九宮格[兼容 ff ie6 ie7 opear ]](http://img.jbzj.com/images/xgimg/bcimg2.png)
用xhtml+css寫的相冊自適應 - 類似九宮格[兼容 ff ie6 ie7 opear ]
用xhtml+css寫的相冊自適應 - 類似九宮格[兼容 ff ie6 ie7 opear ]...2007-05-05
ES6增加了很多新的語法，很多同學學習起來感覺很別扭，有時候也不理解新增加的語法有什么用，對ES6的學習也沒有興趣進而動力不足、學習效率不高。下面這篇文章將通過30分鐘帶大家快速入門掌握ES6/ES2015的核心內容，需要的朋友可以參考下。2018-04-04
curl命令查看請求響應時間的方法非常簡單，今天小編抽空給大家介紹下使用Curl命令查看請求響應時間方法，感興趣的朋友一起看看吧2016-11-11
javascript中的offsetWidth、clientWidth、innerWidth及相關屬性方法
這篇文章主要介紹了javascript中的offsetWidth、clientWidth、innerWidth及相關屬性方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
Javascript 面象對象成員、共享成員變量實驗，需要的朋友可以參考下。2010-11-11
JS使用canvas中的measureText方法測量字體寬度示例
這篇文章主要介紹了JS使用canvas中的measureText方法測量字體寬度,結合實例形式分析了canvas的measureText方法相關使用技巧,需要的朋友可以參考下2019-02-02
實例分析JS中的相等性判斷===、 ==和Object.is()
這篇文章主要給大家介紹了關于JS中相等性判斷===、 ==和Object.is()的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JS具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-11-11
js實現(xiàn)json數(shù)據(jù)行到列的轉換的實例代碼
為了實現(xiàn)這樣的數(shù)據(jù)顯示出來三個序列，分別為鄭州、新鄉(xiāng)、安陽的電量，就需要自己實現(xiàn)對這樣數(shù)據(jù)的轉換，轉換成如下的形式：2013-08-08