如何在同一页面上的 3 个不同文本字段上使用按键功能？

Question

我有 3 个文本字段，我正在使用以下 javascript 来计算英文和中文字符的剩余字符，因此它会根据 unicode 更改为 160 个字符或 70 个字符。那不是问题。问题是他们的 keyup 功能似乎只适用于其中一个领域。它不适用于所有三个。请帮忙 ？ 提前感谢很多

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