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)
