谷歌材料设计在打字时增加文本区域

Question

我正在尝试在我的表单中实现Google Material Design Guidelines，它运行良好，直到我碰到了文本区域。我想要的是这样的： 当您专注于 textarea 时，只有一行，但是当您到达行尾（键入时）时，它会自动添加另一行并继续在那里键入。

我在 codepen 上找到了这个，但它使用的是输入字段，而不是文本区域。这只是水平滚动...Demo

  <input type="text" required>

谁有这个代码并愿意分享？ 谢谢

Answer 1

您可以使用<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>

Answer 2

您正在自己创建所有 Material Design CSS 和 Jquery？

否则，我在这里找到了您提到的 Material Design textarea：

来源：https://materializecss.com/text-inputs.html#textarea

查看他们的Textarea 部分。

Answer 3

实际上，要获得这种级别的控制，并解决在大多数 Web 浏览器上可以手动调整文本区域大小的事实，您需要使用带有 the contenteditable attribute 的 div。

请参阅HTML doctor entry on contenteditable 了解更多信息。

此外，要计算字体大小和溢出，您可能需要使用the canvas measureText method，例如使用画布作为屏幕外替代品（您输入的文本与在 contenteditable 元素中输入的文本完全相同）。

最后，虽然 css lineHeight 属性可以在一定程度上促进这些计算，但也有一些专门用于此目的的 javascript 库。我找到了Font.js，在撰写本文时尚未对其进行测试。