超実践的な JavaScript フォームコードスニペット_javascript スキル-jsチュートリアル-php.cn

超実践的な JavaScript フォームコードスニペット_javascript スキル

WBOY

リリース： 2016-05-16 15:13:23

オリジナル

1468 人が閲覧しました

より実用的な Javascript フォームのコードスニペットをいくつかまとめて、参考のために共有しました。具体的な内容は次のとおりです。

1 複数の window.onload メソッド

ページが読み込まれた後に onload メソッドが自動的に呼び出されるため。そのため広く使われていますが、onloadでは実行できるメソッドが1つしかないというデメリットがあります。次のコードスニペットでは、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,"");

ログイン後にコピー

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

ログイン後にコピー

5 文字列の長さを制限します (中国語と英語を区別します)

メインアイデア:

には 3 つのデータが必要です: 1. 入力の長さを制限します。 3. インターセプトする文字数。

JS のインターセプトメソッドは中国語と英語を区別しないため、

「ははは」.substr(0,2) ---->はは

「はは」.substr(0,2) --->は

ただし、エンコーディングによれば、1 つの漢字は 2 つの文字に対応し、1 つの文字は 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 プログラミングを学習する皆さんのお役に立てれば幸いです。