html - 如何防止 textarea 调整大小句柄通过更高的 z-index div 显示？

Question

我想要一个隐藏的 <textarea>我页面上的元素来处理用户输入，同时以自定义方式显示它。我想我可以通过给它一个比我隐藏它的元素更低的 z-index 来做到这一点(是的，元素也被定位)。事实上，textarea被适当隐藏。但是......当输入足够多的文本以需要滚动条时，调整大小 handle ( handle )图标会显示在掩码顶部 <div> ! (至少，在 chrome 上。)

Here's a jsfiddle一起玩。

我怎样才能阻止这种情况发生？该句柄实际上不允许调整大小，因此它会根据内容长度弹出到顶部似乎很奇怪。

此外，是否有更规范的隐藏文本输入字段的方法？

Answer 1

这应该完全禁用调整大小的句柄 - 但使用 clip() 你可以隐藏滚动条

<style>
 textarea{ 
   position: absolute;
   left:10px;
   top:10px;
   z-index:-1;
   resize:none;
   width:200px;
   height:50px;
   clip:rect(0,189px, 50px, 0);
 }
</style>