Corrigez un caractère à la zone de saisie de texte à l'aide de javascript / jquery

Je cherche un moyen de «réparer» un symbole de dollar $ à une boîte de saisie de texte, par exemple <input type="text" value="$" /> mais ne permet pas d'éliminer la valeur par défaut, de sorte que quoi que ce soit Les entrées de l'utilisateur, il y a toujours une entrée de «signe de pré-dépôts».

À votre santé

Il existe une possibilité d' background-image mais il est difficile à maintenir, et ne réagit pas aux changements de taille de police, ce qui en fait le choix moins optimal de l'OMI.

Une meilleure façon dans mon opionion serait:

  • Mettez <span>$</span> côté de l'entrée (avant, en fait).

  • Lui donner position: relative; left: 20px position: relative; left: 20px .

  • Le signe $ se déplace dans le champ de saisie.

  • Ensuite, donnez le padding-left: 24px champ d'entrée padding-left: 24px .

  • Voilá! Le signe $ se trouve dans le champ de saisie, n'obscurcit rien et ne peut pas être supprimé.

En développant la réponse de Pekka, j'ai utilisé cela sur ma page, mais je l'ai automatisé un peu avec jQuery. Donc, pour cet exemple, tous les champs de saisie auxquels je souhaite mettre un symbole $, je leur donne une classe de «coût».

CSS:

 <style type=&quot;text/css&quot; media="screen"> .cost{ position: relative; left: 20px; } input.cost{ padding-left: 24px; } </style> 

JQuery:

 <script type="text/javascript"> $(document).ready(function(){ $("#lcce form input.cost").wrap('<div class=&quot;cost">'); $("#lcce form input.cost").before('<span class="cost"></span>'); }); </script/> 

Cela placera l'étendue avec une classe de «coût» juste avant votre saisie, et également enrouler un div autour de l'entrée et de la portée, de sorte qu'ils sont assurés d'être sur la même ligne.

Si vous n'avez pas jQuery, vous pouvez l'obtenir à partir de: jQuery.com

Maintenant j'ai une question rapide – j'ai remarqué que, avec ce style, dans IE6,7 et 8, le symbole $ n'est pas aligné correctement. Quelqu'un a-t-il un problème pour cela?

Je vous remercie!

Est-ce seulement un effet visuel? Si oui, vous pouvez l'appliquer avec CSS comme image d'arrière-plan sur l'entrée.

Ensuite, sur le serveur, vous pouvez faire ce que vous voulez avec la valeur (par exemple, préférez avec $).

J'ai aussi examiné différentes solutions pour cela. L'utilisation de css pour refaire le texte avec le rembourrage et mettre une image d'arrière-plan dans cette position est votre meilleur pari.

Je l'ai fait comme ça:

 $('#price').keypress(function(event) { var code = (event.keyCode ? event.keyCode : event.which); if ($(this).val().indexOf('$') === -1){ document.getElementById("price").value = "$" + $(this).val(); } else { document.getElementById("price").value = $(this).val(); } }); 

Avec <input type="text" id="price"> .

L'utilisateur peut supprimer manuellement le signe dollar s'il le souhaite.