Google Material Design Growing Textarea while
我正在尝试在我的表单中实现Google Material Design Guidelines，它工作得很好，直到我遇到了文本区。我想要的是这样的:当你关注文本区域时，只有一行，但当你到达行尾时(同时键入)，它会自动添加另一行，并在那里继续键入。
我在codepen上找到了这个，但它使用的是输入字段，而不是文本区域。这只是水平滚动..。Demo
<input type="text" required>有谁有这个代码并愿意分享吗？谢谢
回答 3
Stack Overflow用户
发布于 2015-06-08 11:05:09
你是自己创建所有的材料设计CSS和Jquery吗？
另外，我找到了你在这里提到的Material Design textarea：
来源：
查看他们的Textarea部件。
Stack Overflow用户
发布于 2015-12-19 18:43:57
实际上，为了获得这种级别的控制，并解决在大多数web浏览器上文本区域可以手动调整大小的事实，您需要使用带有the contenteditable attribute的div。
有关更多信息，请参阅HTML doctor entry on contenteditable。
此外，为了计算字体大小和溢出，您可能希望使用the canvas measureText method，例如使用canvas作为屏幕外的替代(其中输入的文本与在contenteditable元素中键入的文本完全相同)。
最后，虽然css的lineHeight属性可以在一定程度上简化这些计算，但有一些javascript库专门用于此目的。我找到了Font.js，在写这篇文章的时候还没有测试过。
Stack Overflow用户
发布于 2019-02-21 22:14:40
你可以使用<div contentEditable>而不是textarea，这将是一个技巧。此外，您可能不使用额外的库(Material-ui，jQuery等).With您的代码，它将如下所示：
.inputBlock {
position: relative;
margin-top: 20px;
font-family: 'Roboto';
display: block;
width: 300px;
background: #FFF;
}
.input {
font-size: 15px;
padding: 0 0 6px;
display: block;
width: 100%;
height: auto;
border: none;
box-sizing: border-box;
resize: none
}
.input:focus {
outline: none;
}
/* LABEL */
label {
color: #777;
font-size: 15px;
font-weight: normal;
position: absolute;
pointer-events: none;
top: 0;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
/* active state */
.input:focus~label,
.input:not(:empty)~label {
top: -15px;
font-size: 11px;
color: #00968a;
}
/* BOTTOM BARS */
.bar {
position: relative;
display: block;
width: 100%;
}
.bar:before,
.bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #00968a;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
/* active state */
.input:focus~.bar:before,
.input:focus~.bar:after {
width: 50%;
}
/* HIGHLIGHTER */
.highlight {
position: absolute;
height: 73%;
width: 100%;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
border-bottom: 1px solid #777;
}
/* active state */
.input:focus~.highlight {
-webkit-animation: inputHighlighter 0.3s ease;
-moz-animation: inputHighlighter 0.3s ease;
animation: inputHighlighter 0.3s ease;
border: none;
}
/* ANIMATIONS */
@-webkit-keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}
@-moz-keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}
@keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}
[class='input textarea'] height: auto !important color: #000000 !important font-size: 15px !important div color: #000000 !important font-size: 15px !important~.highlight height: 77% !important<div class="inputBlock">
<div contentEditable class="input" required></div>
<span class="highlight"></span>
<span class="bar"></span>
<label>Name</label>
</div>
https://stackoverflow.com/questions/30694132
复制相似问题
腾讯云开发者
