控制select为readonly状态

最新推荐文章于 2024-08-24 12:49:04 发布

PekingCarol

最新推荐文章于 2024-08-24 12:49:04 发布

阅读量5.5k

点赞数

分类专栏： J2EE 文章标签： function input class login url jquery

本文链接：https://blog.csdn.net/wan4u/article/details/6576473

版权

J2EE 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

实质都是用：

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

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

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

</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);
     }
    }
   });
  }
});