Простой текстовый и однострочный контент-доступный div

Question

Я пытаюсь создать div-строку «single-line» и «plain-text» contenteditable. Другими словами, я просто хочу сделать <input type="text">, но не присутствую в этой форме. Как я могу использовать форму contenteditablediv, чтобы представить форму <input type="text">?

Answer 1

Вы можете отключить Введите ключ для элемента contentEditable, используя JavaScript. Вот версия 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>