Question

您好我想使用此脚本来计算包含许多字段的表单中的char，但不想要重复的代码，我想只为所有字段使用一个代码，如何传递到javascript名称字段计数并显示此计数... 作为许多领域的一个计数器输入类型... 谢谢萨尔瓦多

<script>
 function countChar(val) {
     var len = val.value.length;
     if (len >= 66) {
     val.value = val.value.substring(0, 66);
     } else {
     $('#charNum').text(65 - len);
     }
  };
</script>

<div id="charNum"></div>
<input type="text" name="name_var1" value="" maxlength="66" onkeyup="countChar(this)" />

<div id="charNum"></div>
<input type="text" name="name_var2" value="" maxlength="66" onkeyup="countChar(this)" />

<div id="charNum"></div>
<input type="text" name="name_var3" value="" maxlength="66" onkeyup="countChar(this)" />

Answer 1

问题是您多次使用ID。尝试使用类并从元素的类名生成选择器。

    <script>
     function countChar(val) {
         var len = val.value.length;
         if (len >= 66) {
            val.value = val.value.substring(0, 66);
         } else {
            $('.' + val.className + '_charNum').text(65 - len);
         }
      };
    </script>

    <div class="name_var1_charNum"></div>
    <input class="name_var1" type="text" name="name_var1" value="" maxlength="66" onkeyup="countChar(this)" />

    <div class="name_var2_charNum"></div>
    <input class="name_var2" type="text" name="name_var2" value="" maxlength="66" onkeyup="countChar(this)" />

    <div class="name_var3_charNum"></div>
    <input class="name_var3" type="text" name="name_var3" value="" maxlength="66" onkeyup="countChar(this)" />

Answer 2

据我所知，你需要为每个字段显示字符左值（取决于最大长度）并限制用户添加额外字符（超过允许限制）。可能这就是你需要的东西。

<div class="countable-item">
    <div class="char-num"></div>
    <input type="text" name="any" class="countable" max-length="66" />
</div>

<div class="countable-item">
    <div class="char-num"></div>
    <input type="text" name="any2" class="countable" max-length="66" />
</div>

<script>
    (function($){
        var restrictMaxLength = function () {
            var maxLength = $(this).attr('max-length'),
                currentValue = $(this).val(),
                currentLength = currentValue.length;

            if (currentLength >= maxLength) {
                return false;
            }
        },
        displayCountCharacters = function () {
            var maxLength = $(this).attr('max-length'),
                currentValue = $(this).val(),
                currentLength = currentValue.length;

            $(this).closest('.countable-item')
                .find('.char-num')
                .text(maxLength - currentLength);
        };

    $(document)
        .on('keypress', '.countable', restrictMaxLength)
        .on('keyup', '.countable', displayCountCharacters); 
    })(jQuery);

</script>

许多字段的计数器字符脚本

2 个答案: