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.
Vous devez vous connecter pour publier un commentaire.
CSS:
HTML:
display:none
pourbr
, intéressant!!Je pense que vous êtes à la recherche d'un
contenteditable
div
avec une seule ligne de texte qui défile horizontalement quand elle déborde lediv
. Ceci devrait faire l'affaire: http://jsfiddle.net/F6C9T/1CSS:
HTML:
La
min-height: 40px
intègre la hauteur pour quand la barre de défilement horizontale apparaît. Unmin-height:20px
permettrait d'étendre automatiquement lorsque la barre de défilement horizontale apparaît, mais cela ne fonctionne pas dans IE7 (si vous pouvez utiliser les commentaires conditionnels pour appliquer séparer le style si vous le voulais).<input type="text" />
?contenteditable
div
qui permet de faire défiler le contenu.overflow-x:hidden;
puis faire défiler le texte avec le curseur, sans montrer une barre de défilement.Voici une solution relativement simple qui utilise le contenteditable de l'événement d'entrée pour analyser les dom et filtrer différentes saveurs, de nouvelles lignes (donc il doit être robuste contre le copier/coller, glisser-déposer, en appuyant sur entrée sur le clavier, etc). Il se condense plusieurs TextNodes en un seul TextNodes, des bandes de retours à la ligne à partir de TextNodes, tue BRs, et met un "display: inline" sur tout autre élément qu'il touche. Testé sur Chrome, aucune garantie n'importe où ailleurs.
JS:
CSS:
HTML:
Ou voici le violon: http://jsfiddle.net/tG9Qa/
input
événement n'est pas universellement pris en charge sur contenteditable, malheureusement. IE et Opera ne supporte pas du tout et Firefox est seulement depuis la version 14.Donc, pour la postérité: la solution la plus simple est d'obtenir votre chef de produit de changer les exigences de sorte que vous pouvez faire, l'édition multiligne. C'est ce qui a fini il se passe dans notre cas.
Cependant, avant que cela s'est passé, j'ai fini par aller tout à fait un chemin dans la création d'un déplacement manuel d'une seule ligne de l'éditeur de texte enrichi. Je l'ai enveloppé dans un plugin jQuery à la fin. Je n'ai pas le temps de terminer (il y a probablement des bugs sous IE, Firefox fonctionne le mieux et Chrome fonctionne assez bien les commentaires sont rares et parfois pas très clair). Il utilise des pièces de la Longiligne de la bibliothèque (extrait parce que je ne veux pas compter sur la totalité de la bibliothèque) pour obtenir l'écran des postes de sélections afin de vérifier la position de la souris et la sélection génétique (de sorte que vous pouvez faire glisser des sélections et de déplacer la boîte).
En gros, il fonctionne en utilisant 3 éléments. Un div extérieure (la chose que vous appelez le plugin), qui obtient overflow: hidden, puis 2 niveaux d'imbrication à l'intérieur. Le premier niveau est en position absolue, le second niveau est le réel contenteditable. Cette séparation est nécessaire car sinon certains navigateurs donnera le contenteditable en position absolue de l'élément grippies, pour permettre à l'utilisateur de déplacer...
En tout cas, il y a ensuite tout un tas de code pour déplacer la position absolue de l'élément autour de l'intérieur de l'élément supérieur, donc le déplacement de la réelle contenteditable. Le contenteditable lui-même a white-space nowrap, etc. etc. pour le forcer à rester sur une seule ligne.
Il y a aussi le code dans le plugin qui est dépouillé de tout ce qui n'est pas une image (comme
br
, tableaux, etc. etc.) à partir de n'importe quel texte collé /glissés dans la boîte. Vous avez besoin de quelques pièces de ce (comme les ponts, de décapage/normalisation des paragraphes, etc.) mais peut-être que vous voulez normalement à maintenir les liens,em
,strong
et/ou une autre mise en forme.Source: https://gist.github.com/1161922
Découvrez cette réponse que je viens de poster. Cela devrait vous aider:
Comment créer un HTML5 seule ligne contentEditable onglet qui est à l'écoute Enter et Esc
Voici le code HTML:
Voici le jQuery/javascript:
Espère que cela aide quelqu'un!!!
Si vous souhaitez une autre façon de résoudre d'autres que de changer les exigences, avec un peu de
display:table
il est tout à fait possible =)CSS:
HTML:
Vous pouvez remplacer cet élément div avec la saisie de texte (après l'événement onclick est appelé).
J'ai utilisé quelque chose de semblable à ce plugin et il a bien fonctionné.
D'autres réponses sont fausses et contiennent quelques erreurs (sur 2019-05-07). D'autres solutions vous suggérons d'utiliser des "white-space: nowrap" (empêche la réalisation d'une autre ligne) + "overflow: hidden" (empêche long texte va au-delà du champ) + cachant <br> et autres.
Première erreur que les solutions "overflow: hidden" empêche également le défilement du texte. L'utilisateur ne sera pas en mesure de faire défiler le texte par:
La seule façon qu'il peut faire défiler utilise les flèches du clavier.
Vous pouvez résoudre ce problème en utilisant "overflow: hidden" et "overflow: auto" (ou "scroll") en même temps. Vous devez créer div parent avec "overflow: hidden" pour masquer le contenu de l'utilisateur ne devrait pas voir. Cet élément doit avoir d'entrée de frontières et d'autres de la conception. Et vous devez créer un enfant div avec "overflow-x: auto" et "contenteditable" attribut. Cet élément devra barre de défilement de sorte que l'utilisateur peut faire défiler, sans limites et il ne verra pas cette barre de défilement en raison de cacher le trop-plein dans l'élément parent.
Exemple de solution:
JS:
CSS:
HTML:
Étape 2: la Résolution de problème avec <br> et d'autres:
Aussi il ya un problème que l'utilisateur ou extensions peuvent coller
Mais conseille à cacher tous <br> est aussi une mauvaise. C'est parce que Mozilla Firefox ajoute <br> élément de champ vide (j'imagine que ça peut être le contournement d'un bug avec le curseur de texte disparaît après suppression de dernier caractère; vérifié dans Firefox 66 publié sur 2019-03-19). Si vous cachez cet élément puis lorsque l'utilisateur déplace le curseur vers le champ signe sera réglé dans ce hidden <br> élément de texte et le curseur sera caché trop (toujours).
Vous pouvez résoudre ce problème si vous allez <br> lorsque vous savez que le champ est vide. Vous avez besoin d'un peu de javascript ici (vous ne pouvez pas utiliser :vide sélecteur car le champ contient <br> les éléments et ne sont pas vides). Exemple de solution:
JS:
CSS:
HTML:
Étape 3: Résolution de problème à l'obtention de la valeur:
Nous cacher <br> éléments de "innerText" valeur ne risque pas de les contenir. Mais:
Ainsi, lorsque vous obtenez la valeur que vous devriez faire remplacer pour éviter les blessures accidentelles obtenir les sauts de ligne:
Ne pas utiliser javascript pour cacher <br>
Aussi vous avez pu résoudre le problème avec des <br> en les enlevant par javascript mais c'est une très mauvaise solution, car après chaque suppression d'utilisateur ne peut pas utiliser la fonction "annuler" action de plus pour l'annulation de modifications a été faite avant de l'enlever.
Vous pouvez également utiliser document.execCommand (supprimer) pour supprimer <br> mais il est difficile à mettre en œuvre + utilisateur peut annuler la suppression et la restauration <br> éléments de.
L'ajout de l'espace réservé
Il n'était pas demandé dans la question, mais je pense que beaucoup de gens à l'aide d'une seule ligne contenteditable éléments en aurez besoin. Ici est un exemple de la façon de faire de l'espace réservé à l'aide de css et de "vide" de la classe, nous avons parlé ci-dessus:
JS:
CSS:
HTML:
Solution avec un seul div et "barre de défilement de la largeur"
Vous pouvez également utiliser un div par le paramètre "overflow-x: auto", "overflow-y: hidden" et "barre de défilement-largeur: none". Mais "scrollbar-largeur" est de nouveau bien et fonctionne uniquement sous Firefox 64+ et pas d'autres navigateurs encore.
Vous pouvez également ajouter:
Je recommande de ne pas utiliser cette solution, mais ici est un exemple:
JS:
CSS:
HTML:
Cette solution a 3 problèmes avec des remplissages:
Pour résoudre ces problèmes, vous devez utiliser 3 éléments comme nous le faisions avant, mais dans ce cas, vous n'avez pas besoin d'utiliser la barre de défilement de la largeur. Notre solution avec les 3 éléments n'ont pas ces problèmes.
D'autres problèmes (dans chaque solution):
avec jQuery, j'ai mis un .événement keypress, puis les tests pour l'e.keyCode == 13 (touche retour) et si c'est le retour de falsification de l'événement et de l'édition n'est pas en mesure de faire multilines
contenteditable
attribut prendtrue
,false
,inherit
ou la chaîne vide est une valeur à ne pasyes
, au moins selon la spécification. Je pense aussi (mais je n'ai pas vérifié) suppression dekeypress
ne fonctionnera pas nécessairement de la croix-navigateur avec la touche retour, et les utilisent dekeydown
et/oukeyup
à la place.