javascript - 将文本区域符号限制为可见部分

Question

有什么方法可以将文本区域输入的符号限制为仅可见部分吗？

我不想滚动，我已经为它指定了行数列，我希望用户不能输入太多可能会出现滚动的字符。

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

我只找到了 2 种可能的解决方案:

1. 使用一些平均数人物。并以此为限数字。这很粗糙。因为对于平均数量为比平时大的大字呢仍然会隐藏一些数据。

2. 使用输入的渲染字符到一些单独的 div 和计算它的宽度/高度。似乎我会很慢，不会确保这是正确的实现。

Answer 1

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

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/