Home > Developer > JavaScript
Sorted out the more practical JavaScript form code snippet, share for everyone to reference, the specific content as follows
More than 1 window.onload methods
Because the OnLoad method is called automatically when the page load completes. So it is widely used, but the disadvantage is that only the onload can execute a method. The following code snippet ensures that multiple methods are executed on 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 space
Str.replace (/^ (\s|\u00a0) +| ( \S|\U00A0) +$/g, "");
3 Use regular filter Chinese
Str.replace (/[\u4e00-\u9fa5]/g, "");
4 Disable copying and copying of users
Xxx.oncopy = function () {return
false;
}
Xxx.onpaste = function () {return
false;
}
5 limit string Length (distinguishing between Chinese and English)
Main ideas:
Requires 3 data: 1 limits the length of the input, 2 has entered how long, 3 intercepts the number of characters;
As JS inside the interception method does not distinguish between Chinese and English, so
"Hahaha". substr (0,2)----> haha
"Haha". substr (0,2)---> Ha
However, if you follow the encoding of a Chinese character should correspond to 2 characters, one letter corresponds to one character.
So when the real length is counted, it should be the length of the character + the number of Chinese characters
For example, we limit the input of 5 characters: Then the input "haha", you can only enter an H, can not enter the Chinese characters. Code reference is as follows, you can run the scrutiny.
<script type= "Text/javascript" > var StrLen = (function () {//strllength has the same functionality, but the writing giant troublesome return function (_str,_mode L) {_model = _model | | "Ch"; In en mode, Chinese counts as 1 characters; Ch mode, Chinese is 2 characters var _strlen = _str.length;
Gets the string length if (_strlen = = 0) {return 0; }else{var Chinese = _str.match (/[\u4e00-\u9fa5]/g);//Match Chinese return _strlen + (Chinese && _model = "Ch"? chinese.length:0);
Why to &&?
}
}
})(); var strlength = function (_str,_model) {_model = _model | | "Ch"; In en mode, Chinese counts as 1 characters; Ch mode, Chinese is 2 characters var _strlen = _str.length;
Gets the string length if (_strlen = = 0) {return 0; }else{var Chinese = _str.match (/[\u4e00-\u9fa5]/g);//Match Chinese return _strlen + (Chinese && _model = "ch"? Ch inese.length:0);
Why 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 Ch is turned on, the length _valuelength = Strlength (_value,datamodel) is recalculated; var vv = _value.match (/[\u4e00-\u9fa5]/g);
When the input "haha", VV is ["Ha", "Ha"] array sublen = datalength-(!vv?0:vv.length); //_valuelength represents a total character length, such as hahaha for 6//datalength is defined as the limit length, such as 5//sublen is the calculated intercept length, when the input furniture ah if (_valuelength &G T
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>
All code:
<!doctype html>
6 Adding CSS Functions
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 used
Setcss (xxx,{
"position": "Relative",
"top": "0px"
});
7 Adaptive text Box
Use ScrollHeight to copy to Style.height
Xxx.style.overflowY = "hidden";
Xxx.onkeyup = function () {
xxx.style.height = xxx.scrollheight+ ' px ';
8 check box Select, Cancel, and select all
//below HTML code <label class= "Checkbox-inline" > <input type= "checkbox" Name= " Actionselects "> Reading </label> <label class=" Checkbox-inline "> <input type=" checkbox "Name=" Actionselects "> Running </label> <label class=" Checkbox-inline "> <input type=" checkbox "Name=" Actionselects "> Games </label> <label class=" Checkbox-inline "> <input type=" checkbox "Name="
Actionselects "> Swimming </label>//Below is the 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].checke
D = false; } document.getElementById ("_select"). onclick = function () {for (i=0;i<targetslen;i++) {targets[i].checked =!targe
ts[i].checked; }
}
Hopefully this article will help you learn about JavaScript programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
