将textarea符号限制为可见部分

是否有任何方法将textarea输入的符号限制为仅可见部分？将textarea符号限制为可见部分

我不想滚动，我已经为它指定了行数列，并且我希望该用户不能输入如此多的字符以至于可能会出现滚动。

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

我发现只有2个可能的解决方案：

使用的字符一些平均数。并且由这个号码限制。这很粗糙。因为对于平均数字为的大字符比平时大仍然会隐藏一些数据。
使用渲染输入的字符到一些单独的div和计算其宽度/高度。似乎到我会很慢，而不是肯定这是正确的实施。

2011-02-10 Yauhen.F

您可以使用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/

来源

2011-02-10 09:43:25

`onkeyup`对于这类事情来说是一个糟糕的方法。它使得它非常笨重（例如，尽量保持你的手指在钥匙上）。而且，在Chrome 9中，删除的字符太多。 – 2011-02-10 09:52:10

@安迪是的，但仍然是最小代码的工作。 – 2011-02-10 10:07:42

你可以设置样式使用快递，或其他一些非比例字体。这样，您就可以确切知道可以容纳多少个字符，因为所有字符都具有相同的大小，这可以使用几种众所周知的技术中的任何一种限制字符串中字符的数量，从而轻松限制它。

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

来源

2011-02-10 10:50:45 Spudley

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

textarea { overflow: hidden; }

您可能需要设置resize: none;像火狐4和Chrome浏览器。此外，如果没有空格，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.

来源

2011-02-10 11:00:24

-1

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

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

对于财产变更应该使用一些多浏览器的解决方案。例如像this

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

来源

2011-02-14 09:14:19

将textarea符号限制为可见部分

回答

相关问题