Make line items show on backend in capitals

Solved
BillyM8
Tourist
10 1 0

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. |

0 Likes
Jason
Shopify Expert
10037 119 1873

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.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
BillyM8
Tourist
10 1 0
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
0 Likes
seangaffney
Tourist
4 0 0

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.

0 Likes
BillyM8
Tourist
10 1 0

This is an 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>

 

0 Likes