HTML中textarea輸入字數限制

HTML中textarea輸入字數限制

實現方法

在HTML中添加一個textarea文本輸入框及一個用於文字提示的標籤<span>：

<textarea class="textarea-comment" placeholder="想對作者說些什麼..." maxlength="1000"></textarea>
<span class="textarea-comment-tip">還可以輸入1000個字符</span>

• placeholder屬性：顯示在文本框中的淡化提示內容；
• maxlength屬性：允許輸入最大字符長度，配合JS中的監聽事件使用。

在JS中添加如下函數：

//封裝一個限制字數方法
var checkStrLengths = function (str, maxLength) {
    var maxLength = maxLength;
    var result = 0;
    if (str && str.length > maxLength) {
        result = maxLength;
    } else {
        result = str.length;
    }
    return result;
}
    
//監聽評論字數輸入
//允許評論內容1000個字符
$(".textarea-comment").on('input propertychange', function () {
    //獲取輸入內容
    var userDesc = $(this).val();
    //判斷字數
    var len;
    if (userDesc) {
        len = checkStrLengths(userDesc, 1000);
    } else {
        len = 0
    }
    //顯示字數
    $(".textarea-comment-tip").html('還能輸入'+(1000-len)+'個字符');
});

上述代碼監聽的是class爲textarea-comment的標籤，當文本內容變化時，會修改class爲textarea-comment-tip的標籤內容，如果想將class屬性替換爲id屬性，只需要將修改.號爲#，同時修改HTML中的class爲id即可。

實現效果

按照上述設置，將會實現下述類似效果，作者項目中有用於美化的css，顯示效果相對好看很多。

【參考鏈接】：textarea輸入框監聽和輸入字數限制