控制select为readonly状态

最新推荐文章于 2023-02-27 16:24:05 发布

原创最新推荐文章于 2023-02-27 16:24:05 发布 · 5.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#function #input #class #login #url #jquery

J2EE 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用JavaScript和jQuery控制用户无法选择和更改特定控件的值，包括直接在HTML中设置readonly属性的方法，以及通过JavaScript函数批量设置控件为只读状态的方法。此外，还展示了如何利用jQuery在特定条件下动态改变select控件的默认值。

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

实质都是用：

onmousemove="this.setCapture();" onmouseout="this.releaseCapture();" onfocus="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);
     }
    }
   });
  }
});