js 控制select为readonly状态

    技术2022-05-12  31

    用js 控制select为readonly状态,该方法仅适用于IE6。并且当下拉框与其他div互相遮挡时,readonly效果无效。

    js代码:(readonlyCtrl.js)

    // set all input/select/textarea readonly function allReadonly(){ // input readonly var inputEle = document.getElementsByTagName("input"); for(var i=0; i<inputEle.length; i++){ inputEle[i].setAttribute("readonly","true",0); inputEle[i].onclick = function setClickFalse(){return false;} inputEle[i].onfocus = function setFocusFalse(){return false;} inputEle[i].onblur = function setBlurFalse(){return false;} } // select readonly var selectEle = document.getElementsByTagName("select"); for(var i=0; i<selectEle.length; i++){ setReadOnly(selectEle[i]); } // textarea readonly var textareaEle = document.getElementsByTagName("textarea"); for(var i=0; i<textareaEle.length; i++){ textareaEle[i].setAttribute("readonly","true",0); } } // select readonly function setReadOnly(obj){ obj.onmouseover = function(){ obj.setCapture(); } obj.onmouseout = function(){ obj.releaseCapture(); } obj.onfocus = function(){ obj.blur(); } obj.onbeforeactivate = function(){ return false; } } // select readonly rollback function rollBack(obj){ obj.onmouseover = function(){ } obj.onmouseout = function(){ } obj.onfocus = function(){ } obj.onbeforeactivate = function(){ } }

    html测试代码:(testReadonly.html)

    <html> <head> <mce:script type="text/javascript" src="readonlyCtrl.js" mce_src="readonlyCtrl.js"></mce:script> <mce:script type="text/javascript"><!-- var flg=false; function readOnlyCtrl(){ var selectEle; if(flg==false){ alert("下拉框无效了。"); selectEle = document.getElementsByTagName("select"); for(var i=0; i<selectEle.length; i++){ setReadOnly(selectEle[i]); } flg=true; }else{ alert("下拉框有效了。"); selectEle = document.getElementsByTagName("select"); for(var i=0; i<selectEle.length; i++){ rollBack(selectEle[i]); } flg=false; } } // --></mce:script> </head> <body > <select> <option value="1">option1</option> <option value="2">option2</option> <option value="3">option3</option> <option value="4">option4</option> <option value="5">option5</option> </select> <input type="button" value="测试" οnclick="readOnlyCtrl()"/> </body> </html>


    最新回复(0)