如何检测rect形状div下的textarea标签中是否有文本？

Question

如图所示，这是我的情况。我正在写一个降价编辑器。将鼠标悬停在textarea上时，可以看到浮动命令按钮面板。命令按钮面板绝对位于textarea的右上角。

但有时候，textarea中的文本被命令面板阻止，因此无法选择下面的文本。

我想检测命令面板下有文本的情况，然后应用一个类将命令面板移动50px。

这是我的问题：如何检测矩形div下的textarea标签中是否有文本？

谢谢！

如下图所示，悬停在textarea上的命令面板会阻止文本。我想发现这种情况。

Answer 1

因此，您可以做的一件事是获取文本区域的宽度。 AKA cols的{​​{1}}属性。

获得文本区域的宽度后，您将在文本区域中获得文本（textarea值）并找到该文本的长度。如果textarea中文字的长度大于textarea的数量，则您知道该文字将跨越cols的长度。

一个非常明显的警告是，假设你正在写一首诗或其他东西，文字永远不会超过整行的长度，该长度将比textarea的长度更长，而实际上从未覆盖整个cols

的长度

另一个固有问题是，如果您开始滚动textarea新文字可能会出现在控件下方。

我真的不认为可以检测textarea内的文字是否在某个textarea之下。

我可能建议您做的只是始终让控件div div高于50px。简单的解决方案，仍然看起来很好，并且不需要任何疯狂的编码，因为我无法真正想象这样做（或任何方式）这样做。

希望这有帮助。

Answer 2

好的，我过去必须做类似的事情来调整textarea的大小。秘诀是有一个可变宽度的屏幕外输入或文本区域。在可见文本字段中更新文本时，将文本复制到屏幕外元素元素。阴影元素必须具有影响可见元素（填充，边框，宽度，高度，字体大小等）的相同样式的所有，以确保获得准确的结果。然后在每次文本更改时测量阴影元素的宽度。