javascript 打字时 Google Material Design 增长 Textarea
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30694132/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Material Design Growing Textarea while typing
提问by nclsvh
I'm trying to implement Google Material Design Guidelinesin my forms and it's working great, until I bumped into the textarea. What I want is this: When you focus on the textarea there is only one line, but when you reach the end of the line (while typing) it automatically adds another line and continues typing there.
我正在尝试在我的表单中实施Google Material Design Guidelines并且它工作得很好，直到我碰到了 textarea。我想要的是：当您专注于 textarea 时，只有一行，但是当您到达该行的末尾（打字时）时，它会自动添加另一行并继续在那里打字。
I have found this on codepen, but this uses an inputfield, not a textarea. This just scrolls horizontally... Demo
我在 codepen 上找到了这个，但它使用的是输入字段，而不是文本区域。这只是水平滚动...演示
<input type="text" required>
Anyone who has this code and is willing to share? Thanks
谁有这个代码并愿意分享？谢谢
回答by yeyene
You are creating all the Material Design CSS & Jquery by yourself?
您是自己创建所有 Material Design CSS 和 Jquery 吗？
Otherwise, I found Material Design textarea like you mentioned in here:
否则，我找到了您在此处提到的 Material Design textarea：
Source: https://materializecss.com/text-inputs.html#textarea
来源：https: //materializecss.com/text-inputs.html#textarea
Check out their Textareapart.
看看他们的Textarea部分。
回答by Mauro Colella
Actually, to obtain this level of control, and work around the fact that a textarea, on most web browsers, can be resized by hand, you'll want to use a div with the contenteditable attribute.
实际上，要获得这种级别的控制，并解决在大多数 Web 浏览器上可以手动调整文本区域大小的事实，您需要使用具有contenteditable 属性的 div 。
See the HTML doctor entry on contenteditablefor more.
有关更多信息，请参阅contenteditable 上的HTML 医生条目。
Further, to calculate font sizes and overflow, you might want to use the canvas measureText method, for example using canvas as an offscreen substitute (where you input exactly the same text that is typed inside your contenteditable element).
此外，要计算字体大小和溢出，您可能需要使用canvas measureText 方法，例如使用 canvas 作为屏幕外替代品（您输入的文本与在 contenteditable 元素中键入的文本完全相同）。
Finally, while the css lineHeight attribute can somewhat facilitate those calculations, there are a few javascript libraries out there that are dedicated to the purpose. I found Font.js, haven't tested it at the time of this writing.
最后，虽然 css lineHeight 属性可以在某种程度上促进这些计算，但有一些专门用于此目的的 javascript 库。我找到了Font.js，在撰写本文时尚未对其进行测试。
回答by Mauro Colella
You can use <div contentEditable>instead of textarea and that will make a trick. Also you might not use additional libraries (Material-ui, jQuery, etc.).With your code it will look like this:
您可以使用<div contentEditable>代替 textarea ，这将是一个技巧。此外，您可能不会使用其他库（Material-ui、jQuery 等）。您的代码将如下所示：
.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>