html - 没有文本区域的多行文本框

Question

我正在使用文本框输入描述，编辑起来可能会很长。有没有办法让它成为多行？

如果这可以在 css 中完成，那将是最好的!

我不想使用 textarea，因为当它出现在搜索表单上并且人们按下“输入”时，它会转到下一行。如果你能阻止它，那是可以接受的。

Answer 1

您不能使输入元素具有多行文本，但您可以使文本框非常接近输入元素，只需要您想要的一些差异。

您需要做的就是在文本区域内按下回车键时阻止回车键的默认操作。

//When key is pressed inside elements with no-enter class
$(".no-enter").keypress(function(e) {
  //If the key pressed is the 'enter' key, prevent the default action (next line).
  if(e.keyCode === 13) e.preventDefault();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="no-enter" placeholder="A whole lot of useless text that goes to the next line."></textarea>

如果您想删除文本区域的调整大小属性以使其看起来更像一个输入元素，请在您的 CSS 中使用它。

.no-enter {
    resize: none;
}

//When key is pressed inside elements with no-enter class
$(".no-enter").keypress(function(e) {
  //If the key pressed is the 'enter' key, prevent the default action (next line).
  if(e.keyCode === 13) e.preventDefault();
})

.no-enter {
  resize: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="no-enter" placeholder="A whole lot of useless text that goes to the next line."></textarea>