2017-09-21 18 views
0

我正在写一些生产代码,我想知道它是否正确使用'this'将对象传递给函数,就像我在我的代码版本中所做的那样。通过文档ID获取对象是否“更安全”?JavaScript输入字段大写是安全的

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

IMO我不通过'this'看到任何问题。 – evolutionxbox

+0

我总是使用'​​this' - 它允许干净的泛型函数 –

+2

您的方法更通用,这很好,但您仍然可以改进它。只需添加类并将其绑定即可。因此,每次不必调用此函数。在文本框中,您只需添加类。这使得你的代码更加清晰易读。 – nikunjM

回答

0

'这'在生产代码中使用是完全正确的。如果你真的需要你,可以使用'this'方法在函数内部获得name属性。对于可怕的双关语抱歉。

0

在onchange属性中提供this是正确的。


有点偏离主题:

另一种选择,以达到相同的结果(保证的值是大写)是具有的CSS装饰输入元件与text-transform: uppercase;。这将使文本在视觉上大写客户端。 然后,您可以执行实际的大写变换服务器端。

1

您的解决方案更可重复使用。使用您的解决方案,您可以根据需要多次使用该功能;使用他们,你将不得不为每个新的输入元素创建一个新的函数。

我更喜欢你的解决方案。教学网站没有使用类似于您的代码的原因可能是因为他们不希望一次性向您投掷多个概念来混淆您。此外,搜索DOM中的元素可能会损害您的网站的性能(但只有像您这样的小例子,它可能没有什么区别,但这个技巧稍后可以帮助您)。

此外,@ nikunjMnage的建议也不错,避免内联事件处理程序是好的做法,正如他所建议的那样,它使您的代码更具可读性。

@ nikunjMnage的解决方案>解决方案>教学网站的解决方案

这里是你将如何实施他的解决方案(绑定事件类,而不是使用内联事件处理程序):

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