纯文本＆amp;单线contenteditable div

Question

我正试图制作一个“单行”和“纯文本”contenteditable div。换句话说，我只想制作一个<input type="text">，但不会出现在这种形式中。如何使用contenteditable div的形式来展示<input type="text">的形式？

Answer 1

您可以使用JavaScript为contentEditable元素禁用 Enter 键。这是一个jQuery版本：

＆＃13;

＆＃13;

$('[contenteditable]').keypress(function (e) {
  if (e.keyCode == 10 || e.keyCode == 13) {
    e.preventDefault();
    // Submit the form, etc.
  }
})
.on('paste keyup', function () {
  var _this = this;
  setTimeout(function () {
    // remove the markups
    $(_this).html($(_this).text());
  }, 0);
});

＆＃13;

[contenteditable] * {
  display: none; /* hide all descendants */
}

[contenteditable] {
  display: inline-block;
  width: 200px;
  overflow: hidden;

  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;

  white-space: nowrap;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable>
    blah blah blah...
</div>

＆＃13;

＆＃13;

＆＃13;