Clever Geek Handbook

Text and one-line content with clear text

I am trying to create a div with one line and "plain text" contenteditable

. In other words, I just want to do <input type="text">

, but not be present in this form. How can I use a form contenteditable

div

to submit a form <input type="text">

?

+3


source to share


1 answer


You can disable the Enterkey for an element contentEditable

using JavaScript. Here is the 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>
Run codeHide result


+5


source






More articles:


All Articles