Vous demandez si cela est possible:
Disons que si j'ai un élément de saisie de texte que je souhaite utiliser pour entrer des devises. Je voudrais probablement un préfixe avant que l'entrée de texte indique quelle devise l'utilisateur effectue son entrée dans.
Par conséquent, le HTML'D ressemble à quelque chose comme: Mais disons que je veux que le "US $" ci-dessus apparaisse comme un préfixe à l'intérieur l'entrée de texte elle-même, sans "US $" faisant partie de la chaîne d'entrée. Quelque chose comme où "US $" est le texte de fond de la saisie de texte. Bien sûr, l'entrée de texte serait indentée pour éviter d'affronter le texte de fond. Toute façon de l'accomplir sans l'utilisation d'images ou de JavaScript? Merci!
3 Réponses :
Je penserais que vous pourriez le faire avec une DIV absolument positionnée qui a un BG transparent. Sinon, vous pourriez avoir un certain succès d'intercepter chaque frappe et de mettre à jour ce qui vous apparaît.
Si vous le souhaitez vraiment, vous pouvez effectuer ce qui suit:
1.) Commencez par un champ étant défini comme suit: P>
.moneyFieldHolder {
background: url(image.png) top left;
}
.moneyField {
border: 0px solid #FFFFFF;
margin-left: 4em;
}
Pour ajouter au piratage, vous auriez également besoin d'un événement Onfocus sur la DIV afin de cliquer dessus, la mise au point a été correctement donnée au champ de saisie.
Ceci est la solution utilisée sur le débordement de la pile pour la zone de recherche, par exemple. Jetez un coup d'œil à la zone de recherche avec Firebug à getfirebug.com
Ouais bien, une image B / G fonctionne assez bien pour une boîte de recherche, mais une entrée de texte pour la devise aura beaucoup trop de valeurs possibles pour que cela soit viable pour créer une image pour chaque devise dans le monde. Donc, cette solution ne serait pas pratique pour un scénario de devise. Mais oui, le hack est cool! :)
Je n'ai pas eu le temps d'essayer ma solution dans IE (laissant du travail maintenant) mais vous pouvez jouer avec cela si vous voulez: Mise à jour: strong> a pris un coup d'œil rapide dans IE6-8 et cela n'a pas fonctionné dans aucun d'entre eux. Je ne sais pas si c'est une cause du document HTML5 minimal ou quelque chose d'autre, je vais en prendre un autre coup d'œil plus tard aujourd'hui ou demain. P> Mise à jour 2: strong> Mise à jour du code pour travailler avec FF 3.5, Opera 9, Safari 4, IE6-8 (et probablement des versions plus antérieures, mais qui n'est pas testée). Prenez le code mis à jour . P> <!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Background text inside text input control</title>
<style>
form { position: relative; }
input { padding-left: 28px; }
span { color: #999; font-size: 14px; left: 5px; position: absolute; top: 3px; }
</style>
</head>
<body>
<form action="" method="post">
<input type="text">
<span>US$</span>
</form>
</body>
</html>
Oh wow. Cela a fonctionné hors de la boîte en chrome (je gère Chrome, la version de développement de Linux; pas sûr de la version Windows) et Firefox 3.5. Peut avoir besoin d'un réglage fin, mais cela ressemble à la meilleure solution jusqu'à présent. Sémantiquement parlant, il est logique que la monnaie soit également dans sa propre balise.
Il aurai besoin de chaque entrée de texte pour être enveloppé dans un conteneur
D'accord, découvrez que le texte de fond ne fonctionnera pas si
Je pense que les tables sont un peu désordonnées lorsqu'il s'agit de positionner afin que vous devriez probablement rester avec DIV, LI ou P pour l'élément de conteneur. Quoi qu'il en soit, j'ai mis à jour le code et est maintenant testé et fonctionne dans les navigateurs suivants: Safari 4, Firefox 3.5, Opera 9, Internet Explorer 6-8 (fonctionne probablement dans les versions antérieures de Safari, Firefox et Opera également). J'ai changé de text-tirette vers le remplissage-gauche et ajouté dans le reste du document HTML (afin que c'est-à-dire ne pas gâcher). Saisissez le code mis à jour: Pastie.org/581636