同じページの3つの異なるテキストフィールドでキーアップ機能を使用するにはどうすればよいですか？

Question

私は3つのテキストフィールドを持っており、英語と中国語の残りの文字を計算するために次のjavascriptを使用しているので、160個の魅力的なキャラクターまたは70個のユニコードに変更されます。それは問題ではありません。問題は、keyup関数がフィールドの1つのみで動作するように見えることです。それは3つすべてでは機能しません。助けてください ？ Thanls事前にたくさん

<script type="text/javascript"> 
 

 

 

 
    (function($){ 
 
     $.fn.smsArea = function(options){ 
 

 
     var 
 
     e = this, 
 
     cutStrLength = 0, 
 

 
     s = $.extend({ 
 

 
      cut: true, 
 
      maxSmsNum: 2, 
 
      interval: 400, 
 

 
      counters: { 
 
       message: $('#smsCount'), 
 
       character: $('#smsLength') 
 
      }, 
 

 
      lengths: { 
 
       ascii: [160, 306, 459], 
 
       unicode: [70, 134, 201] 
 
      } 
 
     }, options); 
 

 

 
     $('#day1content').keyup(function(){ 
 

 
      clearTimeout(this.timeout); 
 
      this.timeout = setTimeout(function(){ 
 

 
       var 
 
       smsType, 
 
       smsLength = 0, 
 
       smsCount = -1, 
 
       charsLeft = 0, 
 
       text = $('#day1content').val(), 
 
       isUnicode = false; 
 

 
       for(var charPos = 0; charPos < text.length; charPos++){ 
 
        switch(text[charPos]){ 
 
         case "\n": 
 
         case "[": 
 
         case "]": 
 
         case "\\": 
 
         case "^": 
 
         case "{": 
 
         case "}": 
 
         case "|": 
 
         case "€": 
 
          smsLength += 2; 
 
         break; 
 

 
         default: 
 
          smsLength += 1; 
 
        } 
 

 
        //!isUnicode && text.charCodeAt(charPos) > 127 && text[charPos] != "€" && (isUnicode = true) 
 
        if(text.charCodeAt(charPos) > 127 && text[charPos] != "€") 
 
        isUnicode = true; 
 
       } 
 

 
       if(isUnicode) smsType = s.lengths.unicode; 
 
       else    smsType = s.lengths.ascii; 
 

 
       for(var sCount = 0; sCount < s.maxSmsNum; sCount++){ 
 

 
        cutStrLength = smsType[sCount]; 
 
        if(smsLength <= smsType[sCount]){ 
 

 
         smsCount = sCount + 1; 
 
         charsLeft = smsType[sCount] - smsLength; 
 
         break 
 
        } 
 
       } 
 

 
       if(s.cut) $('#day1content').val(text.substring(0, cutStrLength)); 
 
       smsCount == -1 && (smsCount = s.maxSmsNum, charsLeft = 0); 
 

 
       s.counters.message.html(smsCount); 
 
       s.counters.character.html(charsLeft); 
 

 
      }, s.interval) 
 
     }).keyup() 
 
    }}(jQuery)); 
 

 

 
    //Start 
 
    $(function(){ 
 
     $('#day1content').smsArea({maxSmsNum:2}); 
 
    }); 
 
<script type="text/javascript"> 
 

 
</script> 
 

 

 

 
<script type="text/javascript> 
 

 
    (function($){ 
 
     $.fn.smsArea = function(options){ 
 

 
     var 
 
     e = this, 
 
     cutStrLength = 0, 
 

 
     s = $.extend({ 
 

 
      cut: true, 
 
      maxSmsNum: 2, 
 
      interval: 400, 
 

 
      counters: { 
 
       message: $('#smsCount2'), 
 
       character: $('#smsLength2') 
 
      }, 
 

 
      lengths: { 
 
       ascii: [160, 306, 459], 
 
       unicode: [70, 134, 201] 
 
      } 
 
     }, options); 
 

 

 
     $('#day2content').keyup(function(){ 
 

 
      clearTimeout(this.timeout); 
 
      this.timeout = setTimeout(function(){ 
 

 
       var 
 
       smsType, 
 
       smsLength = 0, 
 
       smsCount2 = -1, 
 
       charsLeft2 = 0, 
 
       text = $('#day2content').val(), 
 
       isUnicode = false; 
 

 
       for(var charPos = 0; charPos < text.length; charPos++){ 
 
        switch(text[charPos]){ 
 
         case "\n": 
 
         case "[": 
 
         case "]": 
 
         case "\\": 
 
         case "^": 
 
         case "{": 
 
         case "}": 
 
         case "|": 
 
         case "€": 
 
          smsLength += 2; 
 
         break; 
 

 
         default: 
 
          smsLength += 1; 
 
        } 
 

 
        //!isUnicode && text.charCodeAt(charPos) > 127 && text[charPos] != "€" && (isUnicode = true) 
 
        if(text.charCodeAt(charPos) > 127 && text[charPos] != "€") 
 
        isUnicode = true; 
 
       } 
 

 
       if(isUnicode) smsType = s.lengths.unicode; 
 
       else    smsType = s.lengths.ascii; 
 

 
       for(var sCount = 0; sCount < s.maxSmsNum; sCount++){ 
 

 
        cutStrLength = smsType[sCount]; 
 
        if(smsLength <= smsType[sCount]){ 
 

 
         smsCount2 = sCount + 1; 
 
         charsLeft2 = smsType[sCount] - smsLength; 
 
         break 
 
        } 
 
       } 
 

 
       if(s.cut) $('#day2content').val(text.substring(0, cutStrLength)); 
 
       smsCount2 == -1 && (smsCount2 = s.maxSmsNum, charsLeft2 = 0); 
 

 
       s.counters.message.html(smsCount2); 
 
       s.counters.character.html(charsLeft2); 
 

 
      }, s.interval) 
 
     }).keyup() 
 
    }}(jQuery)); 
 

 

 
    //Start 
 
    $(function(){ 
 
     $('#day2content').smsArea({maxSmsNum:2}); 
 
    }); 
 
    
 
</script> 
 
    
 
<script type="text/javascript"> 
 

 
    (function($){ 
 
     $.fn.smsArea = function(options){ 
 

 
     var 
 
     e = this, 
 
     cutStrLength = 0, 
 

 
     s = $.extend({ 
 

 
      cut: true, 
 
      maxSmsNum: 2, 
 
      interval: 400, 
 

 
      counters: { 
 
       message: $('#smsCount3'), 
 
       character: $('#smsLength3') 
 
      }, 
 

 
      lengths: { 
 
       ascii: [160, 306, 459], 
 
       unicode: [70, 134, 201] 
 
      } 
 
     }, options); 
 

 

 
     $('#day3content').keyup(function(){ 
 

 
      clearTimeout(this.timeout); 
 
      this.timeout = setTimeout(function(){ 
 

 
       var 
 
       smsType, 
 
       smsLength = 0, 
 
       smsCount2 = -1, 
 
       charsLeft2 = 0, 
 
       text = $('#day3content').val(), 
 
       isUnicode = false; 
 

 
       for(var charPos = 0; charPos < text.length; charPos++){ 
 
        switch(text[charPos]){ 
 
         case "\n": 
 
         case "[": 
 
         case "]": 
 
         case "\\": 
 
         case "^": 
 
         case "{": 
 
         case "}": 
 
         case "|": 
 
         case "€": 
 
          smsLength += 2; 
 
         break; 
 

 
         default: 
 
          smsLength += 1; 
 
        } 
 

 
        //!isUnicode && text.charCodeAt(charPos) > 127 && text[charPos] != "€" && (isUnicode = true) 
 
        if(text.charCodeAt(charPos) > 127 && text[charPos] != "€") 
 
        isUnicode = true; 
 
       } 
 

 
       if(isUnicode) smsType = s.lengths.unicode; 
 
       else    smsType = s.lengths.ascii; 
 

 
       for(var sCount = 0; sCount < s.maxSmsNum; sCount++){ 
 

 
        cutStrLength = smsType[sCount]; 
 
        if(smsLength <= smsType[sCount]){ 
 

 
         smsCount3 = sCount + 1; 
 
         charsLeft3 = smsType[sCount] - smsLength; 
 
         break 
 
        } 
 
       } 
 

 
       if(s.cut) $('#day3content').val(text.substring(0, cutStrLength)); 
 
       smsCount3 == -1 && (smsCount3 = s.maxSmsNum, charsLeft3 = 0); 
 

 
       s.counters.message.html(smsCount3); 
 
       s.counters.character.html(charsLeft3); 
 

 
      }, s.interval) 
 
     }).keyup() 
 
    }}(jQuery)); 
 

 

 
    //Start 
 
    $(function(){ 
 
     $('#day3content').smsArea({maxSmsNum:2}); 
 
    }); 
 
    
 
    </script>

<form method="post" action=""> 
 
<table class="table"> 
 
<tr style="background:#3C8DBC;"> 
 
<th>Day 1</th> 
 
</tr> 
 

 
<tr> 
 
    <td> 
 
    <div class="form-group row"> 
 
     <label for="day1content" class="col-sm-2 col-form-label">Content:</label> 
 
     <div class="col-sm-3"> 
 
     <textarea name="day1content" id="day1content" width="300px" cols="60" rows="8" id="content"></textarea> 
 
     Characters left: (<b id="smsLength"></b>) 
 
     <b id="smsCount"></b> /2 SMS <br /> 
 
     </div> 
 
    </div> 
 
    </td> 
 
</tr> 
 

 
<tr> 
 
    <td> 
 
    <div class="form-group row"> 
 
     <label for="content2" class="col-sm-2 col-form-label">Content:</label> 
 
     <div class="col-sm-3"> 
 
     <textarea name="day2content" id="day2content" width="300px" cols="60" rows="8" id="content"></textarea> 
 
     Characters left: (<b id="smsLength2"></b>) 
 
     <b id="smsCount2"></b> /2 SMS <br /> 
 
     </div> 
 
    </div> 
 
    </td> 
 
</tr> 
 

 
<tr> 
 
    <td> 
 
    <div class="form-group row"> 
 
     <label for="day3content" class="col-sm-2 col-form-label">Content:</label> 
 
     <div class="col-sm-3"> 
 
     <textarea name="day3content" id="day3content" width="300px" cols="60" rows="8" id="content"></textarea> 
 
     Characters left: (<b id="smsLength3"></b>) 
 
     <b id="smsCount3"></b> /2 SMS <br /> 
 
     </div> 
 
    </div> 
 
    </td> 
 
</tr>

Answer 1

私はあなたがしたい場合、あなたは各入力用のプラグインのsmsArea複数の時間を再現している理由は、これが実際に問題となっている知りませんプラグインの名前をsmsArea1,2などに変更して、各入力を独自のプラグイン（）と呼ぶようにすることができますが、これは良い方法ではありません。

良い方法はただ一つのプラグインを持っていて、ここで、各入力

のためにしたい任意の特定のオプションでそれを供給することである作業例

(function ($) { 
 
    $.fn.smsArea = function (options) { 
 
    var 
 
     e = this, 
 
     cutStrLength = 0, 
 
     s = $.extend({ 
 
     cut: true, 
 
     maxSmsNum: 2, 
 
     interval: 400, 
 
     lengths: { 
 
      ascii: [160, 306, 459], 
 
      unicode: [70, 134, 201] 
 
     } 
 
     }, options); 
 

 
    $(this).keyup(function() { 
 
     var $this = $(this); 
 
     clearTimeout(this.timeout); 
 
     this.timeout = setTimeout(function() { 
 
     var 
 
      smsType, 
 
      smsLength = 0, 
 
      smsCount = -1, 
 
      charsLeft = 0, 
 
      text = $this.val(), 
 
      isUnicode = false; 
 
     for (var charPos = 0; charPos < text.length; charPos++) { 
 
      switch (text[charPos]) { 
 
      case "\n": 
 
      case "[": 
 
      case "]": 
 
      case "\\": 
 
      case "^": 
 
      case "{": 
 
      case "}": 
 
      case "|": 
 
      case "€": 
 
       smsLength += 2; 
 
       break; 
 

 
      default: 
 
       smsLength += 1; 
 
      } 
 
      //!isUnicode && text.charCodeAt(charPos) > 127 && text[charPos] != "€" && (isUnicode = true) 
 
      if (text.charCodeAt(charPos) > 127 && text[charPos] != "€") 
 
      isUnicode = true; 
 
     } 
 

 
     if (isUnicode) smsType = s.lengths.unicode; 
 
     else smsType = s.lengths.ascii; 
 

 
     for (var sCount = 0; sCount < s.maxSmsNum; sCount++) { 
 

 
      cutStrLength = smsType[sCount]; 
 
      if (smsLength <= smsType[sCount]) { 
 
      smsCount = sCount + 1; 
 
      charsLeft = smsType[sCount] - smsLength; 
 
      break 
 
      } 
 
     } 
 
     if (s.cut) $this.val(text.substring(0, cutStrLength)); 
 
     smsCount == -1 && (smsCount = s.maxSmsNum, charsLeft = 0); 
 
     s.counters.message.html(smsCount); 
 
     s.counters.character.html(charsLeft); 
 
     }, s.interval) 
 
    }).keyup() 
 
    } 
 
}(jQuery)); 
 
//Start 
 
$(function() { 
 
    $('#day1content').smsArea({ 
 
    maxSmsNum: 2, 
 
    counters: { 
 
     message: $('#smsCount'), 
 
     character: $('#smsLength') 
 
    } 
 
    }); 
 
    $('#day2content').smsArea({ 
 
    maxSmsNum: 2, 
 
    counters: { 
 
     message: $('#smsCount2'), 
 
     character: $('#smsLength2') 
 
    } 
 
    }); 
 
    $('#day3content').smsArea({ 
 
    maxSmsNum: 2, 
 
    counters: { 
 
     message: $('#smsCount3'), 
 
     character: $('#smsLength3') 
 
    } 
 
    }); 
 
});