纯文本和单行 contenteditable div

Question

我正在尝试制作“单行”和“纯文本”contenteditable div。换句话说，我只是想做一个<input type="text">，而不是以这种形式出现。如何用contenteditablediv的形式呈现<input type="text">的形式？

Answer 1

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

$('[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);
});

[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;
}

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

纯文本和单行 contenteditable div

A plain-text & single-line contenteditable div

html

javascript

css

contenteditable