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

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

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

Ответы

Ответ 1

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

getElementById('YourDiv').contentEditable = true;

Ответ 2

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

Ответ 3

JQuery можно использовать следующим образом:

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

Ответ 4

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

Ответ 5

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

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

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

Ответ 6

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

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