Как сделать div с мигающим курсором и редактируемым текстом без использования <input>?

Question

Мне нужно создать слой div, чтобы при нажатии на него курсор на нем мигал, и вы могли вставлять / удалять текст точно так же, как <input type="text">, за исключением того, что я не хочу использовать его как есть. немного слишком ограничен моим случаем.

Я определенно могу использовать JavaScript.

Answer 1

Элемент DIV имеет (также и другие элементы) contentEditable свойство, которое вы можете установить в Javascript на true.

getElementById('YourDiv').contentEditable = true;

Answer 2

Вы можете сделать div редактируемым, установив для его атрибута / свойства contentEditable значение true. Однако для всего, что немного более мощное или гибкое, чем простейшее редактирование, вы можете посмотреть на существующие решения, такие как:

• TinyMCE
• RTE Кевина Рота
• Редактор YUI

Answer 3

Jquery можно использовать так:

$.('#yourDiv').click(function() {
    $(this).attr('contenteditable', 'true');
});

Answer 4

Я предлагаю вам использовать текстовую область, а если этого недостаточно, используйте редактор WYSIWYG, например tinyMCE или FCKeditor.

Answer 5

насколько я понимаю вашу проблему, вы можете восстановить ее, добавив textarea в ваш div. Очень просто сделать этот textarea автоматический размер, чтобы он занимал всю div область и выглядит следующим образом div.

Что касается contentEditable, я видел некоторые браузеры, поддерживает эту функцию для div -элемента и не поддерживает. В любом случае, вы можете использовать iframe в вашем div. Это document -элемент может иметь contentEditable.

Answer 6

Для этой цели можно использовать атрибут

contenteditable . Следующая строка кода была протестирована в IE7 и Firefox 3.0.10. С одной стороны, я заметил, что этот атрибут должен использоваться только в нижнем регистре; иначе это не будет работать в Firefox.

<div id="Div_ID" contenteditable="true" tabindex="0">
   Enter text here
</div>