Need help with Javascript code, works on Desktop but not mobile

I have some Javascript code for a form input field. The code adds a '$' whenever click/focus on the input field, and also adds commas to properly format numbers (ex. $1,000,000).

The code works fine on desktop, but the '$' and commas do not work when I am on mobile device.

This is the code:

<input type="text" id="annual_salary" name="annual_salary" placeholder="Annual Salary" oninput="setCustomValidity('')" >

<script>

$('#annual_salary').on('keyup change focus click input paste',(function (event) {
$(this).val(function (index, value) {
return '$' + value.replace(/(?!\.)\D/g, "").replace(/(?<=\..*)\./g, "").replace(/(?<=\.\d\d).*/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
});
}));

var dollar1 = document.querySelector('#annual_salary');
dollar1.addEventListener('blur', function(e){
if (dollar1.value == '$'){
dollar1.value = '';
}
});
</script>


Attached are pictures of the described area.