Comment retourner les coordonnées absolues des pixels de la fin d'une chaîne dans une entrée de texte?

Question

Je voudrais être en mesure d'insérer dynamiquement un div à la fin d'une chaîne dans une entrée de texte.

Par exemple, si j'ai une entrée de texte ...

MyInput: <input type="text" name="myInput" value="" /> 

... et dans leurs types quelqu'un navigateur ...

MyInput: Here is some sample input 

je voudrais générer le div immédiatement après le mot entrée.

Est-ce que quelqu'un sait comment obtenir les coordonnées absolues des pixels de l'extrémité d'une chaîne dans une entrée de texte?

Merci!

Answer 1

Je n'aime pas des réponses comme celle-ci, mais:

Et vous voulez que cela fonctionne multi-navigateur et multi-plateforme, non? IE, Chrome, Firefox, Safari; Windows, Linux, Mac ... J'ai un très forte suspicion nous ne sommes pas encore là. Lorsque vous entrez dans les boîtes de saisie, vous obtenez des contrôles rendus nativement (sur IE, par exemple), ce qui vous fait descendre le lapin des polices installées et des améliorations d'accessibilité et ...

À moins que le cas d'utilisation ne soit vraiment écrasant , ou quelqu'un pointe vers la fonctionnalité que je ne connais pas (et serai très heureux d'apprendre), je recommande d'aborder cette interface sous un angle différent.

Answer 2

Je voudrais essayer de créer un élément en ligne avec le même texte que l'entrée, puis en calculant la largeur de cet élément et en utilisant la largeur comme coordonnée «gauche» pour la div.

par exemple:

<input type="text" value="Here is some sample input" /> 
<span id="clonedInput" style="visibility:hidden">Here is some sample input</span> 

Votre fonction pour tester la largeur et mettre à jour le texte span pourrait être onkeypress. Je verrais le plus de succès avec cette méthode si vous appliquiez les mêmes styles CSS à l'échelle que l'entrée (jusqu'à la famille de police/pt)