Force Web Form Text Input to Uppercase

1

I’m wondering if anyone can help me with a way to automatically capitalize the contents of a text input field in a web form. The Treepl coupon codes are case-sensitive and I have a client who has coupon codes with capital letters and customers who don’t enter coupon codes in all uppercase. For example, if the coupon code is: DISCOUNT and someone enters Discount, the coupon code field errors out. I have been trying to find a workaround for a while now and came up with this:

<input oninput="this.value = this.value.toUpperCase()" />

However, this solution won’t apply the coupon code in Mac Desktop Safari or iPhone Chrome or Safari, so it seems to be an iOS issue that I can’t find a workaround for. Does anyone have any ideas?

Thank you!

  • Ryan
2

@StudioRTP - Use jQuery. There are several approaches you can follow subject to your specific needs. Just Google “jquery force input uppercase”. The following is one solution.

3

@TopLeftDesigns - thank you for your reply here. I tried the jQuery version and I’m getting the same issue. The input field will convert entries to uppercase as they are typed, but the ‘Apply’ button for the coupon field ‘breaks’ and the discount is no longer applied - but just on iOS, MacOS works just fine. I’ll keep digging to see if I can figure out what’s going on, and if I have any luck, I’ll post here in case anyone else runs into this issue. Thank you again!

4

@StudioRTP Your code works just fine on Safari and iOS. I use it all the time in my forms. There may be something else going on that is making the script fail.
I also add autocapitalize="characters" this will force capitals on mobile devices, so they don’t have to hit the shift key. I use it for State fields if I don’t use a dropdown.

5

@Rhatch - Thank you. Yeah, I assume there is something wrong with the form and not the solution. I did not design the original site or web form and there is some other JS and customizations going on. There must be a conflict that I haven’t found yet, so I’ll go back to digging… Just seemed odd that it works fine on my desktop in Chrome/Firefox/Safari, but won’t work on the iPhone in Chrome or Safari. I can’t imagine where the conflict would be to cause that issue, but wish me happy digging - lol! Thank you!