contenteditable d'une seule ligne d'entrée

Pour une application que nous développons dans l'entreprise où je travaille, nous avons besoin d'une entrée qui prend en charge l'insertion des émoticônes à l'intérieur de notre JS basé sur le web application. Nous sommes actuellement à l'aide d'une entrée avec de l'émoticône shortcodes (ie ':-)') et souhaite passer à l'insertion réel, des images graphiques.

Notre plan initial était d'utiliser un contenteditable <div>. Nous sommes à l'aide d'écouteurs pour la pâte de l'événement ainsi que les différentes clés/interactions de la souris afin de s'assurer qu'aucun indésirable de balisage entre le contenteditable (nous bande de texte hors de son contenant les balises et laisser seulement les balises d'image que nous avons de nous-mêmes).

Cependant, le problème actuel est que la div redimensionne si vous mettez assez de contenu (c'est à dire sa hauteur augmente). Nous ne voulons pas que cela arrive, ni est-il acceptable pour le texte juste d'être caché (c'est à dire de la plaine overflow: hidden). Donc:

Est-il un moyen de faire de la contenteditable div se comportent comme une seule ligne d'entrée?

J'aimerais mieux si il est relativement simple attribut/propriété css que j'ai raté qui va faire ce que je veux, mais si nécessaire CSS+JS suggestions seront également appréciés.

  • Désolé, mais je ne comprends pas la question. overflow:hidden ne faire une div comportent comme un seul-entrée ligne: jsfiddle.net/YLMK4/2 (vérifier dans chrome et IE9 au moins, et jsfiddle.net/YLMK4/1 pour une solution qui fonctionne dans les FF. Bien sûr, vous pouvez intégrer les deux facilement) alors qu'est-ce que vous cherchez?
  • Dans (/2), le texte passe pour moi. Dans (/1) une barre de défilement s'affiche et je ne vois pas ce que je suis en tapant. C'est Fx 5.0.1 sur Linux.
  • Je ne suis pas heureux avec la barre de défilement de la solution, donc je vais tenter ma main au piratage d'un JS+CSS solution qui ne nécessite pas de barre de défilement, une fois que j'ai le temps (live questions d'aujourd'hui...). Si j'échoue, je vais probablement mettre un bounty pour voir si quelqu'un peut venir avec un fonctionnement de solution sans une barre de défilement.
  • Si vous réussissez, vous pourrez ensuite publier votre résultat final ici comme la réponse. Je suis vraiment curieux de voir ce que vous venez avec.
  • Bien sûr! Maintenant j'ai quelque chose qui fonctionne bien en Fx5 et de Chrome, à l'aide de getBoundingClientRect et le positionnement de la div à l'intérieur d'un conteneur. J'ai encore besoin d'ajouter un peu de la gestion des événements de la souris en faisant glisser la sélection, alors qu'il sera plus ou moins parfait... et puis je vais devoir vérifier ce qui se passe sur IE. 😉
  • fait! J'ai bloqué jusqu'à la source dans un résumé, "malheureusement" mon gestionnaire de produits a décidé, en voyant le degré de travail pour une seule ligne-ness, que peut-être nous devrions avoir une multiligne éditeur, de sorte que le code a été abandonné...
  • J'ai écrit la grande réponse à cette question stackoverflow.com/a/55950530/6243725. Pouvez-vous s'il vous plaît marquer comme réponse?
  • veuillez utiliser le 'extrait' de la fonctionnalité post au bon fonctionnement d'un extrait de code qui combine tous ces aspects de votre réponse.
  • Merci pour la suggestion, j'ai ajouté des extraits.
  • J'ai aussi: 1) correction de problèmes avec les rembourrages. Maintenant, c'est seulement une solution avec un bon frontières externes et internes. 2) ajout d'un exemple d'ajouter un espace réservé. Il n'a pas de problèmes (des solutions dans d'autres questions ont des problèmes). 3) ajout d'une section avec d'autres petits problèmes à gauche. 4) un rembourrage supplémentaire dans la solution des problèmes avec un div et "barre de défilement de la largeur". Veuillez marquer mon post de réponse.

InformationsquelleAutor Gijs | 2011-07-26