Make line items show on backend in capitals

[BillyM8]

So if a customer wants to type a special requirement, our website automaticlly capitalizes it. However when its shown on the back ends its back to the way the user typed it. So if they typed it lower case we would get it lower case.

Is there a way to show it capitalised our end aswell.

A photo above for example. |

[Jason]

Is what the customer entered actually capital letters though, or is this just field styling to make it appear so? Got an example of a product link which has the field in place?

The initial path here would be to make sure the characters are actually capitals so the Admin should show everything as expected.

[BillyM8]

No, so our website capitalises the text in the registration field however would like to to appear on the back end in caps too even if they didn’t.

https://titanplates.com/collections/3d-gel-number-plates/products/3d-black-gel-resin-plates

[seangaffney]

I imagine you're using the CSS "text-transform: uppercase;" rule on the frontend, but that only applies the styling visually. You'd need to change the data that's in the `value` of the input. We do this with JavaScript like so:

<input type="text" oninput="makeUppercase(event)">

And with the following Javascript elsewhere on the page:

function makeUppercase(e) {
    var ss = e.target.selectionStart;
    var se = e.target.selectionEnd;
    e.target.value = e.target.value.toUpperCase();
    e.target.selectionStart = ss;
    e.target.selectionEnd = se;
}

This ensures that you can still input text in at the beginning or middle of the string and it will maintain the position of the caret.

[BillyM8 · Accepted solution]

Was fixed with the following:

<script type="text/javascript">

  			function forceInputUppercase(e)
  			{
    			var start = e.target.selectionStart;
    			var end = e.target.selectionEnd;
    			e.target.value = e.target.value.toUpperCase();
    			e.target.setSelectionRange(start, end);
  			}

  			document.getElementById("registration").addEventListener("keyup", forceInputUppercase, false);

			</script>