Of Stack

Useful JavaScript form code snippets

  • 2021-01-14 05:40:16
  • OfStack

Organized the next more practical Javascript form code section, to share with you for your reference, the specific content is as follows

More than 1 window.onload methods

Because the onload method is called automatically after the page is loaded. Therefore, it is widely used, but the drawback is that only one method can be implemented with onload. The following code snippet ensures that multiple methods are executed in Onload: 


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

2 regular expressions to remove Spaces 


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

3 use regular filtering Chinese 


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

4 Prohibit copying and copying by users 


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

5. Limit string length (Chinese and English)

Main ideas:

Three pieces of data are required: 1. Limit the length of the input; 2 how long has been entered; 3. How many characters to intercept;

Because JS in the interception method does not distinguish between Chinese and English, so

"Hahaha". ES32en (0,2) ---- > Ha ha

"haha. substr - (0, 2) > ha

However, if you follow the code, one Chinese character should correspond to two characters, and one letter corresponds to one character.

So when counting the true length, it should be the length of characters + the number of Chinese characters

For example, let's limit the input to 5 characters: after typing "ha ha", only 1 ES46en can be typed, and no more Chinese characters can be typed. The code reference is as follows, can run 1 under the Knock Knock. 


 <script type="text/javascript">
  var strLen = (function(){//strlLength It does the same thing, but it's a huge hassle to write 
   return function(_str,_model){
    _model = _model || "Ch"; //En Mode, Chinese counts 1 Character; Ch Mode, Chinese is 2 A character 
    var _strLen = _str.length; // Get the string length 
    if(_strLen == 0){
     return 0;
    }else{
     var chinese = _str.match(/[\u4e00-\u9fa5]/g); // Matching Chinese 
     return _strLen + (chinese && _model == "Ch"?chinese.length:0); // Why do you want to && ? 
    }
   }
  })();
  var strLength = function(_str,_model){
   _model = _model || "Ch"; //En Mode, Chinese counts 1 Character; Ch Mode, Chinese is 2 A character 
   var _strLen = _str.length; // Get the string length 
   if(_strLen == 0){
    return 0;
   }else{
    var chinese = _str.match(/[\u4e00-\u9fa5]/g); // Matching Chinese 
    return _strLen + (chinese && _model == "Ch"?chinese.length:0); // Why do you want to && ? 
   }
  }
  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"){// Only when the open Ch Before recalculating the length of the cut 
     _valueLength = strLength(_value,dataModel);
     var vv = _value.match(/[\u4e00-\u9fa5]/g); // When I type [haha], vv is [" ha "," ha "] An array of 
     subLen = dataLength - (!vv?0:vv.length);
    }
    //_valueLength Represents the total character length, such as hahaha   for  6
    //dataLength That's the limit length that we defined, for example  5
    //subLen Is the calculated length of the cut-off, when the input furniture ah 
    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>

Full code: 


<!doctype html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 <script type="text/javascript">
  function addLoadEvent(func){
    var oldonload = window.onload;
    if(typeof window.onload != 'function'){
     window.onload = func;
    }else{
     window.onload = function(){
      oldonload();
      func();
     }
    }
   }
 </script>
</head>
<body>
 <p class="h3"> Limit the length of the string </p>
 <div class="container">
 <div class="row">
  <div class="col-md-4">
   <input type="text" class="form-control" data-length="5" id="remainingCharacters" data-model="Ch">
  </div>
 </div>
 </div>
 
 <script type="text/javascript">
  var strLen = (function(){//strlLength It does the same thing, but it's a huge hassle to write 
   return function(_str,_model){
    _model = _model || "Ch"; //En Mode, Chinese counts 1 Character; Ch Mode, Chinese is 2 A character 
    var _strLen = _str.length; // Get the string length 
    if(_strLen == 0){
     return 0;
    }else{
     var chinese = _str.match(/[\u4e00-\u9fa5]/g); // Matching Chinese 
     return _strLen + (chinese && _model == "Ch"?chinese.length:0); // Why do you want to && ? 
    }
   }
  })();
  var strLength = function(_str,_model){
   _model = _model || "Ch"; //En Mode, Chinese counts 1 Character; Ch Mode, Chinese is 2 A character 
   var _strLen = _str.length; // Get the string length 
   if(_strLen == 0){
    return 0;
   }else{
    var chinese = _str.match(/[\u4e00-\u9fa5]/g); // Matching Chinese 
    return _strLen + (chinese && _model == "Ch"?chinese.length:0); // Why do you want to && ? 
   }
  }
  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"){// Only when the open Ch Before recalculating the length of the cut 
     _valueLength = strLength(_value,dataModel);
     var vv = _value.match(/[\u4e00-\u9fa5]/g); // When I type [haha], vv is [" ha "," ha "] An array of 
     subLen = dataLength - (!vv?0:vv.length);
    }
    //_valueLength Represents the total character length, such as hahaha   for  6
    //dataLength That's the limit length that we defined, for example  5
    //subLen Is the calculated length of the cut-off, when the input furniture ah 
    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>
 <hr>
 <!-- **************************************************************************** -->
</script>
</body>
</html>

6. Add CSS function 


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

When using 


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

7 Adaptive text box

Copy scrollHeight to style.height 


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

Check boxes are fully checked, unchecked, and unchecked 


// The following html code 
<label class="checkbox-inline">
 <input type="checkbox" name="actionSelects"> Reading a book 
</label>
<label class="checkbox-inline">
 <input type="checkbox" name="actionSelects"> running 
</label>
<label class="checkbox-inline">
 <input type="checkbox" name="actionSelects"> The game 
</label>
<label class="checkbox-inline">
 <input type="checkbox" name="actionSelects"> swimming 
</label>
// The following is js code 
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;
 }
}

Hope this article described to everyone to learn javascript program design help.

Related articles: