DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 實用的JS代碼段(表單篇)
實用的JS代碼段(表單篇)
編輯: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 已經輸入了多長; 3 截取多少個字符;

由於JS裡面的截取方法不區分中英文 ,因此

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

“haha”.substr(0,2) ---> ha

但是,如果按照編碼一個漢字應該對應2個字符,一個字母對應一個字符。

因此統計 真實長度 時,應該是 字符的長度 + 漢字的個數

例如我們限制輸入5個字符:那麼輸入“哈哈”後,就只能輸入一個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"?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"?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?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>
全部代碼

<!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">(支持中英文區分)限制字符串長度</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的功能相同,但是寫法巨麻煩
return function(_str,_model){
_model = _model || "Ch"; //En模式下,中文算作1字符;Ch模式下,中文為2個字符
var _strLen = _str.length; //獲取字符串長度
if(_strLen == 0){
return 0;
}else{
var chine
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved