Input mask does not work on mobile devices

Question

Hello!

I have the codes below and they work in desktop/ notebook quietly, but when we use smartphone/ tablet the masks of inputs (phone) do not work.

Javascript code:

function formatar_mascara(src, mascara) {
 var campo = src.value.length;
 var saida = mascara.substring(0,1);
 var texto = mascara.substring(campo);
 if(texto.substring(0,1) != saida) {
 src.value += texto.substring(0,1);
 }
}

Form code:

<form method="post" id="form1" action="">    

<div class="form-row">    

      
<div class="form-group col-md-3">
<label><strong>E-mail</strong></label>
<a name="email" style="padding-top:100px;"></a>
<input type="email" name="alu_email" id="alu_email" class="form-control" value="" required maxlength="100"/>
</div>

<div class="form-group col-md-3">
<label><strong>Fone 1</strong> <small class="text-black-50">(apenas números)</small></label>
<input type="text" name="alu_tel1" id="alu_tel1" class="form-control" maxlength="13" onKeyPress="formatar_mascara(this,'## #####-####')" value="" required/>
</div>

<div class="form-group col-md-3">
<label><strong>Fone 2</strong> <small class="text-black-50">(apenas números)</small></label>
<input type="text" name="alu_tel2" id="alu_tel2" class="form-control" maxlength="13" onKeyPress="formatar_mascara(this,'## #####-####')" value=""/>
</div>

<div class="form-group col-md-3">
<label><strong>Fone 3</strong> <small class="text-black-50">(apenas números)</small></label>
<input type="text" name="alu_tel3" id="alu_tel3" class="form-control" maxlength="13" onKeyPress="formatar_mascara(this,'## #####-####')" value=""/>
</div>

<div class="form-group col-md-12" align="center">
<button name="sub" id="sub" class="btn btn-primary btn-sm" type="submit">Salvar</button>
</div>


</div>
</form>

Does anyone know where the mistake is?

Yes... all Bootstrap Tags are configured on the page normally.