其他
自动增长<textareas>的最干净技巧
<textarea>
更像 <div>
,因此它的高度可以扩展以包含当前值。这几乎是奇怪的,没有一个简单的原生解决方案,不是吗?<h1>Auto-Growing <code><textarea></code></h1>
<form action="#0">
<label for="text">Text:</label>
<div class="grow-wrap">
<textarea name="text" id="text" onInput="this.parentNode.dataset.replicatedValue = this.value"></textarea>
</div>
</form>
.grow-wrap {
/* 简单的方法将元素叠加在一起,并根据最高者的高度确定它们的大小。*/
display: grid;
}
.grow-wrap::after {
/* 注意奇怪的空间!需要预防跳动行为 */
content: attr(data-replicated-value) " ";
/* 这就是textarea文本的表现形式 */
white-space: pre-wrap;
/* 隐藏在视图,点击和屏幕阅读器中 */
visibility: hidden;
}
.grow-wrap > textarea {
/* 您可以保留此设置,但是在用户调整大小后,它将破坏自动调整大小 */
resize: none;
/* Firefox显示增长的滚动条,您可以像这样隐藏。*/
overflow: hidden;
}
.grow-wrap > textarea,
.grow-wrap::after {
/* 需要相同的样式!*/
border: 1px solid black;
padding: 0.5rem;
font: inherit;
/* 放在彼此之上 */
grid-area: 1 / 1 / 2 / 2;
}
body {
margin: 2rem;
font: 1rem/1.4 system-ui, sans-serif;
}
label {
display: block;
}
效果
<textarea>
的内容复制到一个可以自动展开高度的元素中,并匹配它的大小。<textarea>
,它不能自动展开高度。<textarea>
的最小高度将成为“基础”高度,但是如果复制的文本元素碰巧变高了,所有的东西也会随之变高。visibility: hidden;
;如果不是完全一样的,那么所有的东西都不会完全正确地生长在一起。white-space: pre-wrap;
,因为这就是textareas的表现。::after
用于复制的文本。我不确定这是否是最好的方法。对我来说感觉很干净,但是我想知道使用 <div aria-hidden =“ true”>
对于屏幕阅读器是否更安全?visibility: hidden;
够了吗?无论如何,那不是奇怪的部分。这是奇怪的部分:content: attr(data-replicated-value) " ";
data
属性从元素中取出并以额外的空间将内容呈现到页面的行(这是奇怪的部分)。如果你不这样做,最终的结果会让人感觉 "跳脱"。我不能说我完全理解它,但它似乎更好地尊重了跨textarea和文本元素的换行行为。原文:https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
作者:Chris Coyier
粉丝福利
137期留言+在看幸运用户:断线,速找我领取红包。
临走前留下,今天的福利
福利1:《JavaScript高级与设计模式》视频教程 获取资源请在公众号对话框中回复关键字:042,如果没有关注请扫下面的二维码 福利2:在看+留言,我随机抽取一位认真留言的小伙伴,给他发一个5~10不等的红包奖励
更多好文
使用 GPU.js 改善JavaScript性能 哇噻!使用使用JSON文件创建SPA页面 初学者的技术写作:技术博客基础知识A-Z指南 create-react-app 4.0.0的新功能 压箱底笔记:Promise和Async/await的理解和使用 Fetch API速查表:9个最常见的API请求 什么是AVIF?如何在你的网站上使用AV1图像格式 将HTML表格转换成精美的PDF的几种方案比较 思维训练:如何设计一个JavaScript插件系统? 如何创建与框架无关的JavaScript插件 听说你熟练使用Vue.js,这9种Vue技术你掌握了吗?
- END -
点赞 + 在看 + 留言,下一个幸运儿就是你!
走心的分享更容易被抽中~
开奖时间 下期文末