控制select为readonly状态

简单说两种方式,实质是一样的,一种简介明了,一种稍显复杂

实质都是用:

οnmοusemοve="this.setCapture();" οnmοuseοut="this.releaseCapture();" οnfοcus="this.blur();"

这句代码来控制用户无法选择和更改该控件的值

 

一、先说简单的(平时都用简单的,但是有大量select控件需要做readonly处理时用复杂的更简单)

<select  οnmοusemοve="this.setCapture();" οnmοuseοut="this.releaseCapture();" οnfοcus="this.blur();">

<option selected >aaa</option>

<option>bbb</option>

</select>   

二、贴一个复杂的,就是把变化放入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(){  

    }   

}

 

另外,对于单个select的readOnly的控制,可以通过jQuery控制,js代码如下:

$("#phone").blur(function(){
  var url = $("#basePath").val() + "/phone/getAreaNew.do";
  var phoneNbr = $("#phone").val();
  if(/^CH/d{9}$/.test(phoneNbr.toUpperCase())){
   $("#regArea").val("sh");
   document.getElementById("regArea").disabled=true;
   $("#regArea").parent("td").append($("<input type='hidden' name='regArea' id ='hidden_regArea'/>").val($("#regArea").val()));
   $("#regArea").attr("name","regArea_");
   return;
  } else {
   document.getElementById("regArea").disabled=false;
   $("#hidden_regArea").remove();
   $("#regArea").attr("name","regArea");
  }
  if(phoneNbr != ""){
   $.ajax({
    type:"post",
    url:url,
    data:"phoneNbr=" + phoneNbr,
    success:function(responseText){
     if(responseText != "" || responseText == "all"){
      $("#regArea").val($("#accessArea").val());
     }else{
      $("#regArea").val(responseText);
     }
    }
   });
  }
 });

响应的jsp代码片段如下:

<form action="" method="post" id="form1">

   <div class="main">
    <table>
     <tr>
      <td align="right" class="label1">账号:</td>
      <td style="height: 30px;">
       <input type="text" id="phone" name="phone" maxlength="11" class="input"/>
      </td>
     </tr>
     <tr>
      <td align="right" class="label1">开户地:</td>
      <td style="height: 30px;">
       <select id="regArea" name="regArea" class="select_other">
                       <option value="all">--开户地--</option>
                       <option value="sh">上海</option>
                      </select>
      </td>
     </tr>
     <tr>
      <td align="right" class="label1">密码:</td>
      <td><input type="password" name="pwd" id="pwd" class="input"/></td>
     </tr>
    </table>
    <div style="margin: auto; text-align: center; margin-top: 15px;">
     <input type="button" id="login_other" name="login_other" class="login" value="登 录"/>
    </div>
   </div>
  </form>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值