A plain-text & single-line contenteditable div

Question

I am trying to make a “single-line” and “plain-text” contenteditable div. In other words, I just want to make a <input type="text">, but not present in this form. How can I use the form of contenteditable div to present the form of <input type="text">?

Yeah, a single-line-and-plain-text contenteditable div. It looks like a “”, but not. — Banana Code, May 15 '15 at 08:28

Hashem Qolami · Accepted Answer · 2015-05-15T09:25:04.423

6

You could disable Enter key for the contentEditable element using JavaScript. Here is a jQuery version:

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

edited May 15 '15 at 09:25

answered May 15 '15 at 08:31

Hashem Qolami

97,268
26
150
164

But there still a problem: how can I strip the HTML tags? – Banana Code May 15 '15 at 09:00
@RedWhale It can be done by replacing the content of the element with the text nodes. In plain JavaScript, there's `element.textContent` that can get/set the text content of an element. The jQuery version is `.text()`. – Hashem Qolami May 15 '15 at 09:15
the content is not scrollable - see http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll – 4esn0k Apr 24 '16 at 06:25
@4esn0k This is what "single-line" means, isn't it? – Hashem Qolami Apr 24 '16 at 06:33
horizontal scrolling could be useful for "single-line" – 4esn0k Apr 24 '16 at 08:00
@4esn0k True, but the goal was to present the form of a text input which does not have a scrollbar ui naturally. – Hashem Qolami Apr 24 '16 at 08:19
2

the is still scrollable when you are trying to select some text or when doing "drag and drop" – 4esn0k Apr 24 '16 at 09:22
@4esn0k Oh, I got the point. That's right. I didn't think of it at the time of writing. – Hashem Qolami Apr 24 '16 at 10:24

A plain-text & single-line contenteditable div

1 Answers1