网站建设之使用CSS调整textarea大小

无论出于何种原因,人们似乎都热衷于textarea使用CSS resize: none声明删除调整大小的句柄。此外,GitHub表示,使用CSS 时,有超过300万个代码结果。textarearesize:none 厦门网站建设 我在堆栈溢出或有种尴尬的建议其他人在过去使用CSS建立声誉resize: none上textarea秒。我不是一个超级用户,但在2011年后,我没有张贴在堆栈溢出的答案上取下右下角点的textarea。另外,问题是我仍然在该答案上获得Stack Overflow的声誉。 永远不要以公正为开端,也不要建议其他人resize: none在样式表中使用CSS 。你可以做得比我更好! CSS resize:none上textarea是不好的UX 我认为,就整体用户体验(UX)而言,resize:none对使用CSS 声明textarea是一个错误的决定。 通常,textarea仅限于许多行和列,或者通过CSS进行了固定width和height定义。仅基于我自己的经验,在回答论坛,在网站上编写联系表,填写实时聊天弹出窗口或什至在Twitter上发送私人消息时,这非常令人沮丧。 有时,您需要输入由许多段落组成的长回复,并将该文本包装在一个很小的textarea框中,使您在键入时难以理解和关注。例如,很多时候我不得不在Notepad ++中编写该文本,然后将整个答复粘贴到该小的文本区域中。我承认我也打开了DevTools来覆盖resize: none声明,但这并不是一种有效的处理方式。 CSS调整大小 根据MDN,resize CSS属性设置元素是否可调整大小,如果可调整大小,则设置方向。另外,请务必记住,该resize属性不适用于将overflow属性设置为的内联元素和块元素visible。 resize通常将CSS 属性应用于以textarea禁用其可缩放性,这就是本文的目的。考虑到我自己发现这个糟糕的UX时,我一直在上面的Stack Overflow答案中获得声誉,这让我感到内在矛盾。除此之外,看起来在这件事上的GitHub代码结果的数量正在增长,从@humphd发现的2017年的200万增加到两年后的300万。 自动高度textarea小号 一种常见的情况是具有一个自动高度textarea元素,该元素在键入新行时会基本扩展。在此问题上,克里斯·费迪南迪(Chris Ferdinandi)撰写了一篇不错的文章,内容涉及如何随着用户键入扩展文本区域。 但是除了上述内容外,我还看到了许多涉及使用CSS resize: none声明的JS hack 。有多种方法可以模拟“ textarea”行为,一种流行的方法是使用div将boolean contentEditable属性值设置为的经典方法true。 <div contentEditable=”true”></div> 这是在Twitter的移动版本上使用ARIA角色的更详细且希望可以访问的示例: 厦门网站建设 resize: none到处都是花哨的实时聊天 因为它是一个精美的新实时聊天小部件,而且竞争非常激烈,所以每个人都希望从中发送视觉消息的方式最美观,最吸引人,最酷。 尽管大多数实时聊天应用程序都使用经典的HTML textarea元素,但实现大多依赖于具有侦听器并height根据框中包含的文本来调整CSS 样式resize: none,但不幸的是,声明仍然保留在CSS中。 厦门网站建设 那么,为什么resize: none在这种情况下如此受欢迎? 为了在这里回答自己,也许如果我不得不为流行的实时聊天应用编写代码,我不想让textarea调整大小的句柄破坏我刚从Figma导入的漂亮组件设计。我可以吗? 我想我resize: vertical至少会坚持,而不是破坏一切resize: none。ŠimeVidas也发布了推文,resize: vertical它足够强大,并且是跨浏览器。

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 网站建设之使用CSS调整textarea大小
分享到:
赞(0)
广告位820*80