多重<text区域>具有字符计数器+行限制器的字段

multiple <textarea> fields with character counter+row limiter

本文关键字：计数器 字段 字符 限制器 text lt 区域 gt 多重      更新时间：2023-09-27

这是我目前必须对用户的可用字符进行倒计数的内容。它可以在多个文本区域工作，我只需要更改id即可。

function checkTextArea(id,limit){
  if (document.getElementById(id)){
    var txt = document.getElementById(id).value;
    if (txt.length>limit){
      document.getElementById(id).value = txt.substr(0,limit);
    }
    len = document.getElementById(id).value.length;
    if (document.getElementById('count'+id)){
      document.getElementById('count'+id).innerHTML = (limit-len)+" characters remaining.";
    }
  }
}

这是限制文本区域中可用行数的JS。

$(document).ready(function(){
    var textArea = $('#foo');
    var maxRows = textArea.attr('rows');
    var maxChars = textArea.attr('cols');
    textArea.keypress(function(e){
        var text = textArea.val();
        var lines = text.split(''n');
        if (e.keyCode == 13){
            return lines.length < maxRows;
        }
        else{ //Should check for backspace/del/etc.
            var caret = textArea.get(0).selectionStart;
            console.log(caret);
            var line = 0;
            var charCount = 0;
            $.each(lines, function(i,e){
                charCount += e.length;
                if (caret <= charCount){
                    line = i;
                    return false;
                }
                //'n count for 1 char;
                charCount += 1;
            });
            var theLine = lines[line];
            return theLine.length < maxChars;
        }
    });
});

我需要将这些组合起来，这样我就可以在多个文本区域上使用行限制和字符数。

http://jsfiddle.net/YevSV/我会把它作为一个练习留给你，让它在边缘看起来很漂亮

编辑：为了防止稍后有人来，这里的限制作为一个参数，并解释了jQuery在添加字符之前调用回调的事实（纯粹是装饰性的比较已经>=）

$(document).ready(function(){
    applyLimiter("foo",420);
});
function applyLimiter(id,limit) {
    if (document.getElementById('count'+id)){
        document.getElementById('count'+id).innerHTML = limit+" characters remaining.";
    }
    var textArea = $('#'+id);
    var maxRows = textArea.attr('rows');
    var maxChars = textArea.attr('cols');
    textArea.keypress(function(e){
        var text = textArea.val();
        var len=text.length;
        if (document.getElementById('count'+id)){
            document.getElementById('count'+id).innerHTML = (limit-(len+1))+" characters remaining.";
        }
        if (len>=limit) return false;
        var lines = text.split(''n');
        if (e.keyCode == 13){
            return lines.length < maxRows;
        }
        else{ //Should check for backspace/del/etc.
            var caret = textArea.get(0).selectionStart;
            console.log(caret);
            var line = 0;
            var charCount = 0;
            $.each(lines, function(i,e){
                charCount += e.length;
                if (caret <= charCount){
                    line = i;
                    return false;
                }
                //'n count for 1 char;
                charCount += 1;
            });
            var theLine = lines[line];
            return theLine.length < maxChars;
        }
    });
}
相关文章：