My maxlength 'fix' for android, kills my 'uppercase only' data

Question

I have a password input on my site, which I would like to limit to 8 characters, and change the input data to all upper case characters.

The following code works great for both, except on an android device...

INPUT

<input type="text" id="password" name="password" class="inputField" placeholder=" Password" 
minlength="8" maxlength="8" onkeyup="this.value = this.value.toUpperCase();"
onfocus="this.placeholder = ''" onblur="this.placeholder = ' Password'" 
oninvalid="this.setCustomValidity('Please Enter Password')" oninput="setCustomValidity('')" 
required="">

I found this code, which does effectively limit the max input on Androids. Unfortunately... it also seems to kill the uppercase character code.

SCRIPT

<script>

var elInput = document.getElementById('password');
var maxLength = elInput.maxLength;
elInput.onkeyup = function(e){
if( elInput.value.length > maxLength  ){
    elInput.value = elInput.value.substring(0, maxLength);
}
};

</script>

Is there a way to accomplish both needs by adjusting this code?

Answer 1

var elInput = document.getElementById('password');
elInput.onkeyup = function() {
  elInput.value = elInput.value.toUpperCase();
};

<input type="text" id="password" maxlength="8">