JavaScript Eingabefelder in Großbuchstaben ist dies sicher

Ich schreibe etwas Produktionscode und ich wollte wissen, ob es richtig ist, 'dies' zu verwenden, um die Objekte an die Funktion zu übergeben, wie ich es in meiner Version des Codes getan habe. Ist es "sicherer", das Objekt per Dokument-ID zu bekommen?JavaScript Eingabefelder in Großbuchstaben ist dies sicher

<!-- 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>

Quelle

2017-09-21 notforsale

IMO I don sehe kein Problem mit der Übergabe von "this". – evolutionxbox

Ich benutze immer 'dies' - es ermöglicht nette saubere generische Funktionen –

Ihr Ansatz ist allgemeiner und das ist gut, aber Sie können es immer noch verbessern. Fügen Sie einfach Klasse hinzu und binden Sie es.So jedes Mal müssen Sie diese Funktion nicht aufrufen . Im Textfeld fügen Sie einfach Klasse hinzu. Das macht Ihren Code sauberer und leichter zu lesen. – nikunjM

"Dies ist vollkommen in Ordnung in Produktionscode zu verwenden. Wenn Sie wirklich brauchten, könnten Sie das Namensattribut innerhalb der Funktion mit 'dieser' Methode erhalten. Entschuldigung für die schrecklichen Wortspiele.

Quelle

2017-09-21 15:04:43

Die Angabe this im Attribut onchange ist korrekt.

Ein bisschen off topic:

Eine andere Möglichkeit, das gleiche Ergebnis zu erzielen (sicherzustellen, wird der Wert in Großbuchstaben ist) ist css dekorieren mit text-transform: uppercase; das Eingangselement zu haben. Dies wird den Text visuell Großbuchstaben Client-Seite machen. Sie können dann die eigentliche Transformationsserverseite in Großbuchstaben ausführen.

Quelle

2017-09-21 15:11:28 user887675

Ihre Lösung ist wiederverwendbar. Mit Ihrer Lösung können Sie die Funktion so oft verwenden, wie Sie möchten. Wenn Sie ihre verwenden, müssen Sie für jedes neue Eingabeelement eine neue Funktion erstellen.

Ich bevorzuge Ihre Lösung. Der Grund, warum die Lehrseite nicht etwas verwendet, das Ihrem Code ähnlich ist, liegt wahrscheinlich daran, dass sie Sie nicht verwirren wollen, indem Sie mehrere Konzepte gleichzeitig auf Sie übertragen.

Auch die Suche nach Elementen im DOM kann die Leistung Ihrer Website beeinträchtigen (aber mit einem kleinen Beispiel wie Ihrem wird es wahrscheinlich keinen Unterschied machen, aber dieser Tipp könnte Ihnen später helfen).

Außerdem ist der Vorschlag von @ nikunjMnage auch nicht schlecht, die Vermeidung von Inline-Event-Handlern ist eine gute Übung, da er Ihren Code besser lesbar macht.

@ nikunjMnage-Lösung> Ihre Lösung> Lösung Lehre Website

Hier ist, wie man seine Lösung implementieren würde (Bindung, die Ereignisse zu Klassen statt mit Inline-Event-Handler):

<!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>

Quelle

2017-09-22 18:00:54 Taurus

JavaScript Eingabefelder in Großbuchstaben ist dies sicher

Antwort

Verwandte Themen