多个文本区域的字数限制答案

【问题标题】：word limits on multiple text areas多个文本区域的字数限制
【发布时间】：2012-06-27 13:43:28
【问题描述】：

我正在创建一个包含四个 textarea 表单的网站。每个表格都有字数限制。

textarea1：250 字限制
textarea2：500 字限制
textarea3：500 字限制
textarea4：250 字限制

我尝试使用在尝试解决此问题时发现的现有示例，但似乎没有任何效果。

   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
var maxwords = 250;
//
function check_length(obj, cnt, rem)
{
    var ary = obj.value.split(" "); // doubled spaces will throw this off
    var len = ary.length;
    cnt.innerHTML = len;
    rem.innerHTML = maxwords - len;
    if (len > maxwords) {
        alert("Message in '" + obj.name + "' limited to " + maxwords + " words.");
        ary = ary.slice(0,maxwords-1);
        obj.value = ary.join(" "); // truncate additional words
        cnt.innerHTML = maxwords;
        rem.innerHTML = 0;
        return false;
    }
    return true;
} 

</script>

HTML

   <textarea name="Message 1" onkeypress="
 return check_length(this,
 document.getElementById('count1'),
 document.getElementById('remaining1'));"></textarea>
Word count: <span id="count1">0</span> &nbsp;
Words remaining: <span id="remaining1">250</span>

<textarea name="Message 2" onkeypress="
 return check_length(this,
 document.getElementById('count2'),
 document.getElementById('remaining2'));"></textarea>
Word count: <span id="count2">0</span> &nbsp;
Words remaining: <span id="remaining2">500</span>

有人知道这个问题的解决方案吗？

提前致谢，汤姆

【问题讨论】：

我们可以看看你在小提琴上的尝试吗？
我认为maxlength 也可以应用于文本区域。
您可能必须创建一个函数，该函数接受文本框输入并使用空格分隔符来查看文本框中有多少单词。此方法需要在间隔或其他一些更新系统（可能在空格键上）上运行，以便您每次都进行更新。限制字数而不是字数限制可能是值得的。
用我当前使用的代码更新了我的帖子
您要求我们解决问题，但您甚至没有提出问题可能是什么或您遇到了什么错误。它调用函数吗？它是在计算单词但没有正确更新吗？尝试先调试一下，然后告诉我们您遇到了什么错误。

标签： javascript html css forms textarea

【解决方案1】：

为你的函数添加一个额外的参数，并从每个函数调用中将 maxWords 发送给它：

function check_length(obj, cnt, rem, maxwords)
{
//... rest of the function would stay the same

当你调用它时，包括最大字数

<textarea name="Message 2" onkeypress="
 return check_length(this,
 document.getElementById('count2'),
 document.getElementById('remaining2'), 250);"></textarea>
Word count: <span id="count2">0</span> &nbsp;
Words remaining: <span id="remaining2">500</span>

要删除剩余的单词，

function check_length(obj, cnt, maxwords)
{
    var ary = obj.value.split(" "); // doubled spaces will throw this off
    var len = ary.length;
    cnt.innerHTML = len;

    if (len > maxwords) {
        alert("Message in '" + obj.name + "' limited to " + maxwords + " words.");
        ary = ary.slice(0,maxwords-1);
        obj.value = ary.join(" "); // truncate additional words
        cnt.innerHTML = maxwords;
        return false;
    }
    return true;
}

在您的 HTML 中，

<textarea name="Message 1" onkeypress="
return check_length(this,
document.getElementById('count1'),250);"></textarea>
Word count: <span id="count1">0</span> &nbsp;

【讨论】：

您知道是否有办法删除“字数”而只保留“剩余字数”？如果我删除“字数：0”，那么它都不起作用。再次感谢
您还必须在函数中删除对它的引用，因为该函数正在寻找该元素，如果它不在 DOM 中，它将引发错误。我会更新我的答案

【解决方案2】：

为这些文本区域插入一个class 属性（如class='area250'、class='area500' 等），然后在函数中包含一个if 语句

function check_length(obj, cnt, rem)
    {
        if(window.event.srcElement.getAttribute('class')=='area250')
            maxwords=250;
        else if(window.event.srcElement.getAttribute('class')=='area500')
            maxwords=500;
        else .......................................

    }

【讨论】：

【解决方案3】：

您的函数的问题在于，您总是根据maxwords 变量检查插入的字数（设置为 250 个字作为第一个 textarea 限制）

所以更好的尝试是将一个额外的参数传递给具有原始限制的函数（每个文本区域不同）

【讨论】：

感谢您的回复，我不是很擅长 javascript，所以我将如何传递一个额外的参数？
mike 的回答可能是一个有效的例子