Question

在我的表单中，我有3个文本字段，在文本字段下方显示剩下的字符数。要做到这一点，我正在使用键加功能。但是它只适用于一个领域。如何使每个文本字段的键功能工作？

我的表格：

<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>

脚本：

<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">



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

Answer 1

这是我怎么写的。你的代码需要一些适应性，但它不应该太难。如果您想知道，我会为了适应性而引用maxlength，并且还有一种内置的方法可以阻止用户超越限制。

＆＃13;

$(".container input").on('keydown', function () {
	$(this)
		.parents(".container")
		.find(".smsCount")
		.html($(this).attr("maxlength") - $(this).val().length);
});

$(".container input").trigger('keydown');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	<input type="text" maxlength="160" /> 
	<div class="smsCount"></div>
</div>

<div class="container">
	<input type="text" maxlength="160" /> 
	<div class="smsCount"></div>
</div>

<div class="container">
	<input type="text" maxlength="160" /> 
	<div class="smsCount"></div>
</div>

＆＃13;

在表单中的3个不同字段上键入功能

1 个答案: