Мне нужно сделать слой div, чтобы при нажатии на него курсор мигал, и вы могли вставлять/удалять текст так же, как это делает <input type="text">, за исключением того, что я не хочу его использовать, так как он слишком ограничен для моего кейс.
Я определенно могу использовать JavaScript.
Элемент DIV имеет (и другие элементы) свойство contentEditable, для которого в Javascript можно установить значение true.
getElementById('YourDiv').contentEditable = true;
Вы можете сделать div доступным для редактирования, установив для его атрибута/свойства contentEditable значение true. Однако для всего, что немного более мощное или гибкое, чем очень простое редактирование, вы можете взглянуть на существующие решения, такие как:
JQuery можно использовать следующим образом:
$.('#yourDiv').click(function() {
$(this).attr('contenteditable', 'true');
});
Я предлагаю вам использовать текстовое поле, и если этого недостаточно, используйте редактор WYSIWYG, такой как tinyMCE или FCKeditor.
насколько я понимаю вашу проблему, вы можете решить ее, добавив textarea в свой div. Очень просто сделать так, чтобы этот textarea авторазмер занимал всю div область и выглядел вот так div.
Что касается contentEditable, я видел некоторые браузеры, поддерживающие эту функцию для div-элемента и не поддерживающие. В любом случае, вы можете использовать iframe в своем div. Это document элемент может иметь contentEditable.
Для этой цели можно использовать атрибут contenteditable. Следующая строка кода была протестирована в IE7 и Firefox 3.0.10. Во-первых, я заметил, что этот атрибут следует использовать только в нижнем регистре; иначе он не будет работать в Firefox.
<div id="Div_ID" contenteditable="true" tabindex="0">
Enter text here
</div>
