Question

我试图在我的表单中实现Google Material Design Guidelines并且它工作得很好，直到我碰到了textarea。我想要的是这个：当您专注于textarea时，只有一行，但是当您到达行尾时（在键入时），它会自动添加另一行并继续在那里键入。

我在codepen上找到了这个，但是它使用的是inputfield，而不是textarea。这只是横向滚动... Demo

  <input type="text" required>

拥有此代码并愿意分享的任何人？谢谢

Answer 1

您正在创建所有Material Design CSS＆amp;自己Jquery？

否则，我发现了像你在这里提到的Material Design textarea：

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

查看他们的Textarea部分。

Answer 2

实际上，要获得这种级别的控制，并解决大多数Web浏览器上的textarea可以手动调整大小这一事实，您将要使用the contenteditable attribute的div。 / p>

有关详情，请参阅HTML doctor entry on contenteditable。

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

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

Answer 3

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

Google Material Design在打字时成长Textarea

3 个答案: