매우 실용적인 JavaScript 양식 코드 snippet_javascript 기술

좀 더 실용적인 Javascript 양식 코드 조각을 편집하여 여러분께 공유해 드렸습니다. 구체적인 내용은 다음과 같습니다

1 다중 window.onload 방법

onload 메소드는 페이지가 로드된 후 자동으로 호출되기 때문입니다. 따라서 널리 사용되지만 onload를 사용하면 한 가지 방법만 실행할 수 있다는 단점이 있다. 다음 코드 조각은 Onload 중에 여러 메서드가 실행되도록 할 수 있습니다.

 function addLoadEvent(func){
  var oldonload = window.onload;
  if(typeof window.onload != 'function'){
   window.onload = func;
  }else{
   window.onload = function(){
    oldonload();
    func();
   }
  }
 }

공백을 제거하는 정규식 2개

str.replace(/^(\s|\u00A0)+|(\s|\u00A0)+$/g,"");

3 일반 규칙을 사용하여 중국어 필터링

str.replace(/[\u4e00-\u9fa5]/g,"");

4 이용자의 무단 복제 및 전재를 금지합니다

xxx.oncopy = function(){
 return false;
}
xxx.onpaste = function(){
 return false;
}

5 문자열 길이 제한(중국어, 영어 구분)

주요 아이디어:

3가지 데이터가 필요합니다. 1. 입력 길이를 제한합니다. 2. 입력할 문자 수를 입력합니다.

JS의 차단 방식은 중국어와 영어를 구분하지 않기 때문에

　"하하하".substr(0,2) ----> 하하

　“하하”.substr(0,2) --->

단, 인코딩에 따라 한자는 2글자, 한 글자는 1글자에 해당해야 합니다.

따라서 실제 길이를 계산할 때는 글자의 길이와 한자의 개수로 계산해야 합니다

예를 들어 입력을 5자로 제한합니다. 그러면 "haha"를 입력한 후에는 h만 입력할 수 있고 더 이상 한자를 입력할 수 없습니다. 코드 참조는 다음과 같습니다. 추가 검토를 위해 실행할 수 있습니다.

 <script type="text/javascript">
  var strLen = (function(){//strlLength的功能相同，但是写法巨麻烦
   return function(_str,_model){
    _model = _model || "Ch"; //En模式下，中文算作1字符；Ch模式下，中文为2个字符
    var _strLen = _str.length; //获取字符串长度
    if(_strLen == 0){
     return 0;
    }else{
     var chinese = _str.match(/[\u4e00-\u9fa5]/g); //匹配中文
     return _strLen + (chinese && _model == "Ch"&#63;chinese.length:0); //为什么要&&？
    }
   }
  })();
  var strLength = function(_str,_model){
   _model = _model || "Ch"; //En模式下，中文算作1字符；Ch模式下，中文为2个字符
   var _strLen = _str.length; //获取字符串长度
   if(_strLen == 0){
    return 0;
   }else{
    var chinese = _str.match(/[\u4e00-\u9fa5]/g); //匹配中文
    return _strLen + (chinese && _model == "Ch"&#63;chinese.length:0); //为什么要&&？
   }
  }
  var funcRemainingCharacters = function(){
   remainingCharacters = document.getElementById("remainingCharacters");
   var clearRemainingCharacters = function(_this){
    var _value = _this.value;
    var _valueLength = _value.length;
    var dataLength = _this.getAttribute("data-length");
    var dataModel = _this.getAttribute("data-model");
    var subLen = dataLength;
    if(dataModel == "Ch"){//仅当开启Ch后，才对重新计算截取的长度
     _valueLength = strLength(_value,dataModel);
     var vv = _value.match(/[\u4e00-\u9fa5]/g); //当输入【哈哈】时，vv是["哈","哈"]数组
     subLen = dataLength - (!vv&#63;0:vv.length);
    }
    //_valueLength代表总共的字符长度，比如哈哈哈 为 6
    //dataLength是我们定义的限制长度，比如 5
    //subLen是计算的截取长度，当输入家具啊
    if(_valueLength > dataLength){
     _this.value = _value.substr(0,subLen);
    }
   }
   remainingCharacters.onfocus = function(){
    clearRemainingCharacters(this);
   }
   remainingCharacters.onkeyup = function(){
    clearRemainingCharacters(this);
   }
   remainingCharacters.onblur = function(){
    clearRemainingCharacters(this);
   }
  }
  addLoadEvent(funcRemainingCharacters);
 </script>

모든 코드:

 
 
 


 
（支持中英文区分）限制字符串长度
 

 

  

   
  
 
 
 
 <script type="text/javascript">
  var strLen = (function(){//strlLength的功能相同，但是写法巨麻烦
   return function(_str,_model){
    _model = _model || "Ch"; //En模式下，中文算作1字符；Ch模式下，中文为2个字符
    var _strLen = _str.length; //获取字符串长度
    if(_strLen == 0){
     return 0;
    }else{
     var chinese = _str.match(/[\u4e00-\u9fa5]/g); //匹配中文
     return _strLen + (chinese && _model == "Ch"&#63;chinese.length:0); //为什么要&&？
    }
   }
  })();
  var strLength = function(_str,_model){
   _model = _model || "Ch"; //En模式下，中文算作1字符；Ch模式下，中文为2个字符
   var _strLen = _str.length; //获取字符串长度
   if(_strLen == 0){
    return 0;
   }else{
    var chinese = _str.match(/[\u4e00-\u9fa5]/g); //匹配中文
    return _strLen + (chinese && _model == "Ch"&#63;chinese.length:0); //为什么要&&？
   }
  }
  var funcRemainingCharacters = function(){
   remainingCharacters = document.getElementById("remainingCharacters");
   var clearRemainingCharacters = function(_this){
    var _value = _this.value;
    var _valueLength = _value.length;
    var dataLength = _this.getAttribute("data-length");
    var dataModel = _this.getAttribute("data-model");
    var subLen = dataLength;
    if(dataModel == "Ch"){//仅当开启Ch后，才对重新计算截取的长度
     _valueLength = strLength(_value,dataModel);
     var vv = _value.match(/[\u4e00-\u9fa5]/g); //当输入【哈哈】时，vv是["哈","哈"]数组
     subLen = dataLength - (!vv&#63;0:vv.length);
    }
    //_valueLength代表总共的字符长度，比如哈哈哈 为 6
    //dataLength是我们定义的限制长度，比如 5
    //subLen是计算的截取长度，当输入家具啊
    if(_valueLength > dataLength){
     _this.value = _value.substr(0,subLen);
    }
   }
   remainingCharacters.onfocus = function(){
    clearRemainingCharacters(this);
   }
   remainingCharacters.onkeyup = function(){
    clearRemainingCharacters(this);
   }
   remainingCharacters.onblur = function(){
    clearRemainingCharacters(this);
   }
  }
  addLoadEvent(funcRemainingCharacters);
 </script>
 

 

6 CSS 기능 추가

var setCSS = function(_this,cssOption){
 if(!_this || _this.nodeType === 3 || _this.nodeType === 8 || !_this.style){
  return;
 }
 for(var cs in cssOption){
  _this.style[cs] = cssOption[cs];
 }
 return _this;
};

이용 시

setCSS(xxx,{
 "position":"relative",
 "top":"0px"
});

7개의 적응형 텍스트 상자

scrollHeight를 style.height로 복사

xxx.style.overflowY = "hidden";
xxx.onkeyup = function(){
 xxx.style.height = xxx.scrollHeight+"px";
};

선택, 취소, 반전을 위한 8개의 체크박스

//下面html代码
<label class="checkbox-inline">
 <input type="checkbox" name="actionSelects">读书
</label>
<label class="checkbox-inline">
 <input type="checkbox" name="actionSelects">跑步
</label>
<label class="checkbox-inline">
 <input type="checkbox" name="actionSelects">游戏
</label>
<label class="checkbox-inline">
 <input type="checkbox" name="actionSelects">游泳
</label>
//下面是js代码
var targets = document.getElementsByName("actionSelects");
var targetsLen = targets.length;
var i = 0;
document.getElementById("allSelect").onclick = function(){
 for(i=0;i<targetsLen;i++){
  targets[i].checked = true;
 }
}    document.getElementById("cancelAllSelect").onclick = function(){
 for(i=0;i<targetsLen;i++){
  targets[i].checked = false;
 }
}
document.getElementById("_select").onclick = function(){
 for(i=0;i<targetsLen;i++){
  targets[i].checked = !targets[i].checked;
 }
}

이 기사가 JavaScript 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.