Question

有没有办法将textarea输入的符号限制为仅可见部分？

我不想滚动，我为它指定了行数列，我希望用户无法输入这么多可能会滚动的字符。

当然我可以设置溢出：隐藏但是无论如何都会输入符号。限制字符数不是我的情况，因为不同的字符采用不同的宽度：例如W和1.我需要这个逻辑，因为在textarea中输入的数据用于某些打印报告，并且不可能在纸上滚动。 / p>

我发现只有两种可能的解决方案：

使用一些平均数字符。并由此限制数。这非常粗糙。因为对于平均数为。的字符串大人物比平常更大仍然会隐藏一些数据。
使用输入的渲染字符到一些单独的div和计算它的宽度/高度。好像我会很慢而不是确定这是正确的实施。

Answer 1

您可以使用JavaScript检查scrollHeight，如果大于“原始”高度，则截断文本，直到它不再滚动为止。代码是：

function CheckScroll(oTextarea) {
    if (oTextarea.scrollHeight > oTextarea.offsetHeight) {
        while (oTextarea.scrollHeight > oTextarea.offsetHeight) {
            oTextarea.value = oTextarea.value.substr(0, oTextarea.value.length - 1);
         }
    }
}

并触发它：

<textarea cols="15" rows="3" onkeyup="CheckScroll(this);" onchange="CheckScroll(this);" onpaste="CheckScroll(this);"></textarea>

实时测试案例：http://jsfiddle.net/yahavbr/bNqVf/1/

Answer 2

我想出了一些类似于Shadow Wizard的努力，它使用oninput来检测所有形式的输入（如粘贴，拖放），而不仅仅是键盘输入。它需要使用以下CSS关闭textarea的滚动条：

textarea { overflow: hidden; }

您可能希望为Firefox 4和Chrome等浏览器设置resize: none;。此外，如果没有空格，Opera的包装不会中断，但它不能正确支持word-wrap: word-break;所以我不确定你是如何解决这个问题的。 JavaScript涉及每次更改时记住textarea的内容，如果文本超出元素的大小，则更改将恢复为之前的值：

var prev = "",
    tArea = document.getElementById("limit");

// Need to use onpropertychange event for IE8 and lower
if ("onpropertychange" in tArea && !("oninput" in tArea)) {
    tArea.onpropertychange = function () {
        // Only run code if value property changes
        if (window.event.propertyName == "value")
            this.oninput();
    }
}

// oninput will fire for all types of input, not just keyboard
tArea.oninput = function () {
    // Temporarily remove the onpropertychange event to prevent a stack overflow
    var opc = this.onpropertychange;
    this.onpropertychange = null;

    // Revert value if the text exceeds the size of the box
    if (this.scrollHeight > this.offsetHeight) {
        this.value = prev;
    }

    prev = this.value;

    if (opc)
        this.onpropertychange = opc;
}

工作演示：http://jsfiddle.net/37Jnn/ - 在Firefox 4，IE8，Chrome 9，Opera 10中测试过。

Answer 3

您可以将其设置为使用Courier或其他非比例字体。这样，你就可以确切地知道有多少个字符可以容纳，因为所有字符都是相同的大小，这样可以很容易地使用几种众所周知的技术中的任何一种来限制它，以限制字符串中的字符数。 / p>

缺点是它看起来不漂亮（除非你碰巧喜欢Courier的样子），但这是一个可行的解决方案，我想不出别的。

Answer 4

总结一下。我将从讨论中排除Courier字体解决方案。因为在大多数情况下这是不可接受的。使用键上/属性更改的两种解决方案都有缺点：输入视觉文本，然后才删除。

当IE中的最后一个符号为\ n时，使substr（0，oTextarea.value.length - 1）出现问题。在这种情况下，它将挂起，因为\ r \ n符号被留下。所以应该使用oTextarea.value.length - 在最后一个\ n。

的情况下使用2

对于on属性更改应该使用一些多浏览器解决方案。例如this

使这种检查用户友好（不允许输入）的唯一可能方法是为每个文本区域创建其他隐藏文本区域，并在数据真正显示在原始文本区域之前对事件中的此文本区域进行所有检查（如关键）。但在这种情况下，它需要处理所有选择范围，粘贴并在隐藏时重新应用它们。而且逻辑不会是微不足道的。

将textarea符号限制为可见部分

4 个答案: