2010-12-06 6 views
1

Ce code modifie tout ce que l'utilisateur tape dans la boîte en majuscules et affiche le résultat dans la boîte.HTML Forms Texte onkeyup

<html> 
<head> 
<script type="text/javascript"> 
function upperCase(x) 
{ 
    var y=document.getElementById(x).value; 
    document.getElementById(x).value=y.toUpperCase(); 
    document.getElementById("mySpan").value=y.toUpperCase(); 

} 
</script> 
</head> 
<body> 

Enter your name: <input type="text" id="fname" onkeyup="upperCase(this.id)"> 
<br/> 
<span id="mySpan"></span> 

</body> </html> 

Mais comment puis-je faire en sorte qu'il l'affiche sous la zone de texte? Et que lorsque l'utilisateur tape, le texte en majuscules est affiché sous la zone de texte?

Merci!

+3

Vous devez apprendre les bases du HTML et du Javascript. – SLaks

Répondre

7

Je suggère l'approche, plus maintenable suivante, qui utilise le event registration model par opposition aux inline model:

JS:

<script> 
document.getElementById("fname").onkeyup = function() { 
    document.getElementById("mySpan").innerHTML = this.value.toUpperCase(); 
} 
</script> 

Markup:

Enter your name: <input type="text" id="fname"/> 
<br/> 
<span id="mySpan"></span> 

Démo: http://jsfiddle.net/karim79/GPZ8h/

+0

comment pourrais-je mettre un "span" sous la boîte? Je ne suis pas familier avec ceux-ci. – CodeGuy

+0

est un "span" un type d'entrée de formulaire? – CodeGuy

+0

c'est ce que j'ai: Entrez votre nom: CodeGuy

2

Créer une classe css

.showUpperCase { text-format: uppercase; } 

et de l'ajouter à votre span ou textBox.

<span id="mySpan" class="showUpperCase"></span> 

Ceci ne modifie pas les caractères entrés, les affiche uniquement en majuscules. Cela signifie que si vous manipulez l'entrée via un textBox, vous devrez également passer du côté serveur côté majuscule au . Il ne s'agit pas d'une corvée supplémentaire, car vous devez vous méfier du traitement côté client et d'une vérification côté serveur, indépendamment de ce que le client fait