HTML/JAVASCRIPT: Désactiver le contenu HTML dans contentEditable = true

Qu'est-ce que je veux?HTML/JAVASCRIPT: Désactiver le contenu HTML dans contentEditable = true

Je veux un div qui fonctionne comme un textarea, je ne veux pas avoir la possibilité de modifier les choses dans la div, et coller des images et ainsi de suite juste du texte.

Exemple

www.facebook.com - Le meilleur exemple est des nouvelles de facebook d'alimentation.

Pourquoi j'ai besoin de cette façon?

Si vous consultez le flux de nouvelles de facebook, vous voyez bien que la zone où vous pouvez écrire votre message, élargit que vous écrivez votre message ou frapper un bon nombre d'entre.

C'est la même raison pour laquelle je veux utiliser un div avec contentEditable, parce que dans textarea je ne peux pas le faire. #

S'IL VOUS PLAÎT NO JQUERY ne JAVASCRIPT

Source

2010-07-27 Adam

Pourquoi ne pouvez-vous pas simplement utiliser une zone de texte alors? –

D'accord, je vois votre édition, mais pourquoi ne pouvez-vous pas utiliser une zone de texte en expansion? –

Umm Je ne sais pas: D – Adam

Textarea redimensionnable en utilisant JavaScript pur sans cadres:

<html> 
    <head> 
     <script> 
      function taOnInput() 
      { 
       var dis = this; 
       setTimeout(
        function(){ 
         var span = document.createElement("div"); 
         span.innerHTML = escape(dis.value).replace(/[%]0A/g, "<br/>")+"<br/>."; //Extra BR for padding... TextArea uses %0A, not \n 
         span.style.width = dis.offsetWidth+"px"; 
         span.style.padding = "0px"; 
         span.style.fontFamily = "Lucida Console"; 
         document.body.appendChild(span); //Offset height doesnt work when not in DOM tree i guess =/? or is it a hack 
         dis.style.height = span.offsetHeight+"px"; 
         document.body.removeChild(span); 
        }, 1 
       ); //setTimeout=hack, since oKP is called BEFORE character append. 
      } 
      window.onload = function() 
      { 
       var resizableTA = document.getElementById("resizableTA"); 
       resizableTA.onkeypress = taOnInput; 
      } 
     </script> 
     <title>ItzWarty - Untitled Document</title> 
    </head> 
    <body> 
     <textarea id="resizableTA">Trololololol</textarea> 
    </body> 
</html>

Très hackish, mis ensemble en moins de 10 minutes. J'espère que ça vous donnera au moins une idée.

testé uniquement sur Google Chrome 5.0.308.0

Explication du code, car je parviennent pas à commenter
1) avant window.onload, le textarea de id "resizableTA" a été créé et annexé au document .body de l'arbre DOM.
2) window.onload attache un gestionnaire d'événements, taOnInput [zone de texte en entrée].
3) textarea on input crée une ficelle, force sa largeur à la largeur de la zone de texte et du style de police à "Lucida Console", AFAIK est la police par défaut pour les zones de texte, copie la valeur de textearea dans innerHTML en remplaçant% 0A [newline que les zones de texte utilisent] avec
[saut de ligne] ...
4) La propriété offsetHeight de span est la hauteur de la travée, qui peut maintenant être utilisée pour forcer la hauteur de la zone de texte. Est-ce que quelqu'un peut confirmer que Lucida Console est la police par défaut de textarea? Est-ce Consola? Courier New? J'ai supposé que toute police à largeur fixe fonctionnerait. Je n'utilise pas Mac, donc je ne sais pas quelles polices il a partagées avec windows, bien que je pense que Courier New est un meilleur choix ...

Source

2010-07-27 08:16:09 Warty

Merci ItzWarty, je travaille actuellement sur mon propre script et ça fonctionne bien avec quelques bugs, la nouvelle ligne ne fonctionne pas encore, mais je suis en passe de le réparer. Le problème avec ce script est le 'setTimeout', il va manger mon serveur comme je le sais. Je l'ai fait avec 'onkeyup'. – Adam

Mangez votre serveur? o.o? Le code est exécuté côté client. setTimeout ne fait que programmer la fonction pour qu'elle s'exécute presque immédiatement, sinon immédiatement, après la commande onkeypress ... – Warty