This means if you enter hello world, you see HELLO WORLD displayed, but if you do this: // you see: hello worldĭocument.getElementById("txtHello").value However, the underlying value is not actually updated.
So this feature ensures that the value you see is smoothly updated to the correct case. Sweet! How did I miss this for so long? 😄 Caveat 1: It's a Transformation, not a Value Assignment
Only alpha characters are affected and number and symbols work as you'd normally expect. The change is instant so you don't first see the lower case character turning to upper case as JS solutions often tend to do. I'm only typing lower case characters into the text box and as you can see the string is automatically upper cased as expected. Here's what that looks like on an input field: In many situations the text-transform filter is a better solution, as it is much simpler, and 'just works' the way you'd expect auto upper casing to work: There are more complete solutions but they are essentially small libraries that aren't exactly quick and easy. To avoid the changing character behavior you can use oninput instead of onkeyup. This solution is jumpy and you can visibly see the characters changing from lower case to upper case as you type: Or the slightly better version that maintains the caret position: tSelectionRange(oldStart, oldEnd),1) This has all sorts of related issues, such as having to deal with selections and caret placement and characters changing as you type. These require intercepting the keyup or oninput event and then reassigning the text. In the past I've used JavaScript for this, text-transform is much better than JavaScript based solutions. This converts text as you type without requiring any JavaScript code, so this is a low impact solution if you need to have fields with specific case requirements. You can apply various text transformation filters to text input fields that provide things like uppercase, lowercase and capitalize among others: It's not even a new-ish CSS property - it's been around for quite some time in browsers, but somehow for all these years I've missed it. I learned something new about CSS today: The text-transform style that allows you to apply a filter to text based input.
0 kommentar(er)
