輸入 Javascript maxLength

Question

當設置為“嚴格”maxLenght 時，我在下載和顯示值時遇到問題 - 一切正常，但是當我希望腳本自己下載值時，我遇到了問題。

該腳本應該從每個<input>獲取值 maxlenght = "" 並且在用戶輸入后它將打印出剩余的字符數。

var maxLen = document.getElementsByClassName("handlerWorld").maxLength;

function countChar(jqObj) {
    var len = jqObj.val().length;
    var diff = maxLen - len;

    if (len > maxLen) {
        len = maxLen;
        diff = 0;
    }
    jqObj.val(jqObj.val().substr(0, len)).prev('label').find('span.chars-twenty').text(diff);
}

$(document).ready(function () {
    $("[class*='handlerWorld']").keyup(function () {
        countChar($(this));
    }).each(function () {
        countChar($(this));
    });
});

我的HTML：

<div class="form-group">
          <label for="nameIput">Nazwa firmy <span>Remaining: <span class="chars-twenty"></span></label>
          <input type="text" id="name" maxlength="140" name="name" class="form-control handlerWorld">
        </div>
        <div class="form-group">
          <label for="urlInput">URL <span>Remaining: <span class="chars-twenty"></span></label>
          <input type="text" id="url" name="url" maxlength="100" class="form-control handlerWorld">
          
        </div>

編輯：

現在我希望它顯示字符數，例如：

10/140

寫入數量/值“maxlenght”中的數量

$("#add-category").find('span.maxchar').text(maxLen);

他們工作但不是他們應該做的。

Answer 1

將 MaxLength 計算移至 Count 方法

var maxLen = jqObj.attr("maxlength");

這是給你的小提琴： https://jsfiddle.net/d53yjpr8/1/

 function countChar(jqObj) { var maxLen = jqObj.attr("maxlength"); var len = jqObj.val().length; var diff = maxLen - len; if (len > maxLen) { len = maxLen; diff = 0; } jqObj.val(jqObj.val().substr(0, len)).prev('label').find('span.chars-twenty').text(diff); } $(document).ready(function() { $("[class*='handlerWorld']").keyup(function() { countChar($(this)); }).each(function() { countChar($(this)); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group"> <label for="nameIput">Test <span>Remaining:</span> <span class="chars-twenty"></span></label> <input type="text" id="name" maxlength="140" name="name" class="form-control handlerWorld"> </div> <div class="form-group"> <label for="urlInput">URL <span>Remaining:</span> <span class="chars-twenty"></span></label> <input type="text" id="url" name="url" maxlength="100" class="form-control handlerWorld"> </div>