Question

我试图限制textarea中的行数，以确保输入的文本适合布局。每行的最大字符数为83。我找到了几个解决方案（like this one），但没有一个正常工作（达到5行之后，仍然可以输入在新行中继续的大字）。

所以我收到了以下脚本，至少限制了字符数：

function sliceText(element)
{
    var maxlength =15;
    if(typeof maxlength !== 'undefined' && maxlength !== false)
    {
       var val = $(element).val();
       val = val.replace(/\r\n/g, '__NL__')
         .replace(/\n/g, '__NL__')
         .replace(/\r/g, '__NL__')
         .replace(/__NL__/g, '\r\n');

       if (val.length > maxlength)
       {
           $(element).val(val.slice(0, maxlength));
           var lastChar = $(element).val()[$(element).val().length - 1];
           if(lastChar == '\n')
           {
                $(element).val(val.slice(0, maxlength - 2));
           }
       }
    }
}

<textarea name="name" onkeyup="sliceText(this)" ></textarea>

我的想法是通过添加＆＃34; 83-((number of characters already entered) modulo 83)＆＃34;来扩展这一点。每个新行。

不幸的是，我几乎不了解Javascript，所以如果有人为此解决问题，我会很高兴。

Answer 1

试试这个

HTML

<form>
    <textarea onKeyPress="return charLimit(this)" onKeyUp="return characterCount(this)"  rows="8" cols="40"></textarea>
</form>
<p><strong><span id="charCount">83</span></strong> more characters available.</p>

的JavaScript

<script type="text/javascript">
var maxLength=83;
function charLimit(el) {
    if (el.value.length > maxLength) return false;
    return true;
}
function characterCount(el) {
    var charCount = document.getElementById('charCount');
    if (el.value.length > maxLength) el.value = el.value.substring(0,maxLength);
    if (charCount) charCount.innerHTML = maxLength - el.value.length;
    return true;
}
</script>

Answer 2

http://jsfiddle.net/gtsq74zy/1/

JS：

function getLineNumber(textarea) {
    return textarea.value.substr(0, textarea.selectionStart).split("\n").length - 1;
}

$(function(){
    var chars = 0;
    var ln = 0;
    var lines = [];
    var check = 1;
    $('#ta').keyup(function(e){
        lines = $(this).val().split('\n');
        ln = getLineNumber($(this)[0]);
        chars = lines[ln].length;
        check = 83 - chars;
        $('#ct').text(check);        
    }).keydown(function(e){
        lines = $(this).val().split('\n');
        ln = getLineNumber($(this)[0]);
        chars = lines[ln].length;
        check = 83 - chars;
        if(chars >= 0 && e.which != 8) check--;

        if(check < 0 && e.which != 8){
            $(this).val($(this).val() + '\n');
            lines = $(this).val().split('\n');
            ln = getLineNumber($(this)[0]);
            chars = lines[ln].length;
            check = 83 - chars;
            if(chars >= 0 && e.which != 8) check--;
        }
        $('#ct').text(check);
    });
});

HTML：

<textarea id="ta" cols="85" rows="7"></textarea>
<br/>
Chars Left: <div id="ct">83</div>

Answer 3

我终于找到了一个有效的解决方案：
JSFiddle

JS：

var textarea = document.getElementById("splitLines");
textarea.onkeyup = function() {
var lines = textarea.value.split("\n");
for (var i = 0; i < lines.length; i++) {
    if (lines[i].length <= 16) continue;
var j = 0; space = 16;
while (j++ <= 16) {
  if (lines[i].charAt(j) === " ") space = j;
}
lines[i + 1] = lines[i].substring(space + 1) + (lines[i + 1] || "");
lines[i] = lines[i].substring(0, space);
 }
textarea.value = lines.slice(0, 6).join("\n");
};

如何限制textarea中的行数

3 个答案: