Switching between UPPER and Regular text using the input text placeholder

Question

Is there a better way of having regular case for a placeholder when the input must be upper case? I want to do this entirely in CSS3 if possible for modern browsers.

The reason is because when I switch back to lowercase it seems a little complex when adding or removing upper case and then the place holder appears with regular text. There are patterns but it doesn't work for switching to uppercase for user input and switching back to regular case for placeholder.

Input:

<input name="myInputText" data-case="UPPER" data-placeholder-case="regular" pattern="[A-Z]*" type=text placeholder="You will be FORCED to use UPPERCASE!" />

Use JQuery val().toUpperCase() when there is a change or keydown event:

$("myInputText").on("keydown", function() {
 if ($("myInputText").val().length > 0)
 {
  $("myInputText").val("myInputText").val().toUpperCase());
  $("myInputText").css("text-transform", "uppercase");
 } else { $("myInputText").css("text-transform", ""); }
}).on("change", function() {
 if ($("myInputText").val().length > 0)
 {
  $("myInputText").val("myInputText").val().toUpperCase());
 } else { $("myInputText").css("text-transform", ""); }
});

References:

1. jQuery On function, butangphp Et al., Found on www 5/22/2015, jQuery ON
2. Change an input's HTML5 placeholder color with CSS, David Murdoch Et al., Found on www 5/22/2015, Placeholder
3. HTML Input Attributes (Pattern), W3School Auth unk, 5/22/2015, Patterns W3Schools

Answer 1

If you're willing to deal with it not working in EVERY browser, you can simply set a different text-transform for the placeholder:

input {
  text-transform: uppercase;
}

::-webkit-input-placeholder {
  text-transform: none;
}

:-moz-placeholder {
  text-transform: none;
}

::-moz-placeholder {
  text-transform: none;
}

:-ms-input-placeholder {
  text-transform: none;
}

<input type="text" placeholder="place holder" />