Javascript检测文本区域中的滚动条
Posted
技术标签:
【中文标题】Javascript检测文本区域中的滚动条【英文标题】:Javascript detect scrollbar in textarea 【发布时间】:2011-03-15 09:20:34 【问题描述】:我想知道是否有人知道我将如何检测滚动条何时出现在 textarea
中。
我目前正在为我的 javascript 使用 mootools,但在让它检测滚动条时遇到问题。
【问题讨论】:
出于好奇,您为什么要检测它? 因为我想用它来检测何时在文本框中放置了 3 行文本并停止允许输入更多字符。 【参考方案1】:function has_scrollbar(elem_id)
const elem = document.getElementById(elem_id);
if (elem.clientHeight < elem.scrollHeight)
alert("The element has a vertical scrollbar!");
else
alert("The element doesn't have a vertical scrollbar.");
查看这个 jsFiddle http://jsfiddle.net/qKNXH/
【讨论】:
非常感谢!这很棒! 因为这是一个非常古老的问题,所以我编辑了这个答案以添加一个从@Castrohenge 的代码中分叉出来的小提琴。 如果你在 textarea 上有“overflow-y:scroll”,这甚至可以工作!非常好。【参考方案2】:我制作了Tommaso Taruffis代码的jQuery“兼容”版本
function resize_until_scrollbar_is_gone(selector)
$.each($(selector), function(i, elem)
while (elem.clientHeight < elem.scrollHeight)
$(elem).height($(elem).height()+5);
);
它可以处理多个元素并接受:选择器、jQuery 对象或 DOM 元素。
可以这样调用:
resize_until_scrollbar_is_gone('textarea');
【讨论】:
【参考方案3】:Tommaso 的解决方案可以完美运行,即使是文本区域也是如此。但是,如果用户输入 textarea 并且突然 textarea 给自己一个滚动条,您的 javascript 将不会知道或被触发。所以您可能想要添加类似
onKeyUp='has_scrollbar("textareaID")'
【讨论】:
【参考方案4】:对于 React,我找到了 https://github.com/andreypopp/react-textarea-autosize
import Textarea from 'react-textarea-autosize';
...
<Textarea maxRows=3 />
【讨论】:
以上是关于Javascript检测文本区域中的滚动条的主要内容,如果未能解决你的问题,请参考以下文章
javascript js-点击按钮,重置或者清空文本区域中的数据