JavaScript Les champs de saisie en majuscules sont-ils sûrs

J'écris du code de production et je voulais savoir s'il était correct d'utiliser 'ceci' pour passer les objets à la fonction comme je l'ai fait dans ma version du code. Est-il "plus sûr" d'obtenir l'objet par document id?JavaScript Les champs de saisie en majuscules sont-ils sûrs

<!-- Code on Teaching site -->  
<script> 
function myFunction() { 
var x = document.getElementById("fname"); 
x.value = x.value.toUpperCase(); 
} 
</script> 
</head> 
<body>  
Enter your name: <input type="text" id="fname" onchange="myFunction()"> 

</body> 
</html> 


<!-- My Version of Code -->  
<script> 
function myFunction(obj) { 
obj.value = obj.value.toUpperCase(); 
} 
</script> 
</head> 
<body>  
Enter your name: <input type="text" id="fname" onchange="myFunction(this)">  

</body> 
</html>

Source

2017-09-21 notforsale

OMI Je don ne vois pas de problème avec le passage 'this'. – evolutionxbox

J'utilise toujours 'ceci' - cela permet de bien nettoyer les fonctions génériques –

Votre approche est plus générique et c'est bien, mais vous pouvez toujours l'améliorer. Ajoutez juste de la classe et attachez-la. Donc chaque fois que vous n'avez pas besoin d'appeler cette fonction . dans la zone de texte, vous ajoutez simplement la classe. Cela rend votre code plus propre et plus facile à lire. – nikunjM

'this' est parfaitement adapté à l'utilisation dans le code de production. Si vous en avez vraiment besoin, vous pouvez obtenir l'attribut name à l'intérieur de la fonction en utilisant la méthode 'this'. désolé pour les calembours terribles.

Source

2017-09-21 15:04:43

Fournir this dans l'attribut onchange est correct.

Un peu hors sujet:

Une autre option pour obtenir le même résultat (assurer la valeur est en majuscules) est d'avoir décorer l'élément css d'entrée avec text-transform: uppercase;. Cela rendra le texte visuellement majuscule côté client. Vous pouvez ensuite faire le côté réel du serveur de transformation en majuscules.

Source

2017-09-21 15:11:28 user887675

Votre solution est plus réutilisable. En utilisant votre solution, vous pouvez utiliser la fonction autant de fois que vous le souhaitez; en utilisant le leur, vous devrez créer une nouvelle fonction pour chaque nouvel élément d'entrée.

Je préfère votre solution. La raison pour laquelle le site d'enseignement n'utilise pas quelque chose de similaire à votre code est probablement parce qu'ils ne veulent pas vous embrouiller en lançant plusieurs concepts à la fois. En outre, la recherche d'éléments dans le DOM peut nuire aux performances de votre site Web (mais avec un petit exemple comme le vôtre, cela ne fera probablement pas de différence, mais cette astuce pourrait vous aider plus tard).

De plus, la suggestion de @ nikunjMnage n'est pas non plus mauvaise, évitant les gestionnaires d'événements en ligne est une bonne pratique, comme il l'a suggéré, il rend votre code plus lisible.

@ solution de nikunjMnage> solution> solution de site d'enseignement

Voici comment vous mettre en œuvre sa solution (liant les événements à des classes au lieu d'utiliser des gestionnaires d'événements en ligne):

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 

Enter your first-name: <input class="uppercase_us" type="text" id="fname"> 
Enter your last-name: <input class="uppercase_us" type="text" id="lname"> 

<script> 
var elems = document.getElementsByClassName("uppercase_us"); 

for(var i = 0; i < elems.length; i++) { 
elems[i].addEventListener("change", function() { 
event.target.value = event.target.value.toUpperCase(); 
} ,false); 
} 
</script> 
</body> 
</html>

Source

2017-09-22 18:00:54 Taurus

JavaScript Les champs de saisie en majuscules sont-ils sûrs

Répondre

Questions connexes