Assigning to this.value moves caret to end of input, which is unacceptable. Using “text-transform” is nice and clean, the actual conversion should be done on the server side in any case.
Oh, right. I forgot about that side effect. Thanks stereofrog. It’s good to have someone here who can catch when I forget an important detail. And you’re right that you should do it server-side in case the JavaScript didn’t execute for whatever reason.
Many sites do this via onchange or onblur, so that the side effect isn’t a problem.
<script type="text/javascript">
function show(a){
var el= document.getElementById(a);
alert(el.value);
}
</script>
<style type="text/css">
.bigLetter { text-transform: uppercase; }
</style>
<input type="text" id="t1" onkeyup="this.value=this.value.toUpperCase(); show(this.id)" ;/> Message box displays E on Internet Explorer, Opera and Firefox <br>
<input type="text" id="t2" onkeyup="this.style.textTransform='uppercase'; show(this.id)"/>Message box displays e on Opera, Firefox and Internet Explorer.<br>
<input type="text" id="t3" onkeyup="show(this.id)" class="bigLetter"> Message box displays e on Opera, Firefox and Internet Explorer.