Comment faire une div avec un curseur clignotant et un texte modifiable sans utiliser <input>?

Question

J'ai besoin de faire une couche div pour que lorsque vous cliquez dessus, votre curseur clignote et que vous puissiez insérer/supprimer du texte comme <input type="text">, sauf que je ne veux pas l'utiliser car il est légèrement trop limité à mon cas.

Je peux définitivement utiliser JavaScript.

Answer 1

L'élément DIV possède (autres éléments également) contentEditable propriété que vous pouvez définir en Javascript à true.

getElementById('YourDiv').contentEditable = true; 

Answer 2

Je vous suggère d'utiliser un textarea, et si cela ne suffit pas, utilisez un éditeur WYSIWYG comme tinyMCE ou FCKeditor.

Answer 3

Vous pouvez rendre la div modifiable en définissant son attribut/propriété contentEditable sur true. Cependant, pour tout ce qui est un peu plus puissant ou flexible puis montage très simple, vous voudrez peut-être envisager des solutions existantes telles que:

• TinyMCE
• Kevin Roth's RTE
• The YUI editor

Answer 4

contenteditable L'attribut peut être utilisé à cette fin. La ligne de code suivante a été testée dans IE7 et Firefox 3.0.10. Une partie, j'ai remarqué que cet attribut devrait être utilisé en minuscules seulement; Sinon, ça ne marchera pas dans Firefox.

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

Answer 5

que je comprends votre problème, vous pouvez resove en ajoutant textarea dans votre div. Il est très simple de faire cette textarea autosize pour occuper toute la zone div et ressemble à ceci div.

Comme pour contentEditable, j'ai vu certains navigateurs, pris en charge cette fonctionnalité pour div -element et ne fonctionne pas. Quoi qu'il en soit, vous pouvez utiliser iframe dans votre div. C'est document -élément peut avoir contentEditable.

Answer 6

Jquery peut être utilisé comme ceci:

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