Quisiera que al momento de seleccionar un input, el focus quede fijo y no pueda moverme a ningún otro campo o elemento hasta que dicho input tenga 10 dígitos.
Mi codigo HTML es el siguiente, sólo estoy practicando para que aparezcan mensajes de alerta. Pero me gustaría que no puedas clicquear en otra parte hasta que tengas 10 dígitos en el input.
<div class="derecha">
<h4>DATOS DE CONTACTO</h4>
<!--input Correo-->
Calle:
<input type="text" id="calle" name="calle" class="form-control" placeholder="Ingrese una calle">
<!--input Contraseña-->
Colonia:
<input type="text" id="colonia" name="colonia" class="form-control" placeholder="Ingrese una colonia">
<!--input Confirmar Contraseña-->
C.P.:
<input type="text" id="cp" name="cp" class="form-control" placeholder="Ingrese un C.P." onkeypress="return soloCP(event);" maxlength="5">
<a id='resulCP'></a>
<!--Input Ciudad-->
Ciudad:
<input type="text" id="ciudad" name="ciudad" class="form-control" placeholder="Ingrese una ciudad">
<!--Input Estado-->
Estado:
<input type="text" id="estado" name="estado" class="form-control" placeholder="Ingrese un estado">
<!--input pais-->
País:
<input type="text" id="pais" name="pais" class="form-control" placeholder="Ingrese un país">
<!--input Celular-->
Celular: +52
<input type="tel" id="telefono" name="telefono" class="form-control" placeholder="Ingrese un celular" onkeyup="validarCel(this)" onkeypress="return soloCelular(event);" maxlength="10">
<a id='resulcel' style="text-decoration: none;"></a> <a id="resulcelV"></a>
<!--input Telefono fijo-->
Teléfono fijo:
<input type="tel" id="fijo" name="fijo" class="form-control" placeholder="Ingrese un teléfono" onkeyup="validartel(this)" onkeypress="return soloNumeros(event);" maxlength="10" required>
<a id='resultadotel' style="text-decoration: none;"></a> <a id="resultadotelN"></a>
</form>
</div>
Y este es mi javascript
validacion de numeros de celular
function soloCelular(evt){
if(window.event){
keynum = evt.keyCode;
}else{
keynum = evt.which;
}
if(keynum>47 && keynum < 58 || keynum == 8 || keynum==13){
return true;
}else{
document.getElementById("resulcelV").innerHTML = "<p id='celVal' style='color: #cc6600; margin-bottom: 0px;'>Solo pueden ingresar números</p>";
$("#celVal").fadeTo(4000, 500).slideUp(500, function(){
$("#celVal").slideUp(500);
});
return false;
}
}
mensajes de Advertencias celular
function validarCel(elemento){
var texto = document.getElementById(elemento.id).value;
var regex = /^(\d{3}[- ]?){2}\d{4}$/i;
if (!regex.test(texto)) {
document.getElementById("resulcel").innerHTML = "<p id='celNO' style='color: red; margin-bottom: 0px;'>Número celular no válido</p>";
return false;
}else {
document.getElementById("resulcel").innerHTML = "<p id='celSI' style='color: green; margin-bottom: 0px;'>Número celular válido</p>";
$("#celSI").fadeTo(3000, 500).slideUp(500, function(){
$("#celSI").slideUp(500);
});
return true;
}
}
validacion telefono
function validartel(elemento){
var texto = document.getElementById(elemento.id).value;
var regex = /^(\d{3}[- ]?){2}\d{4}$/i;
if (!regex.test(texto)) {
document.getElementById("resultadotel").innerHTML = "<p id='telNO' style='color: red; margin-bottom: 0px;'>Número telefónico no válido</p>";
}else {
document.getElementById("resultadotel").innerHTML = "<p id='telSI' style='color: green; margin-bottom: 0px;'>Número telefónico válido</p>";
$("#telSI").fadeTo(3000, 500).slideUp(500, function(){
$("#telSI").slideUp(500);
});
}
}
mensajes de advertencia de telefono
function soloNumeros(evt){
if(window.event){
keynum = evt.keyCode;
}else{
keynum = evt.which;
}
if(keynum>47 && keynum < 58 || keynum == 8 || keynum==13){
return true;
}else{
document.getElementById("resultadotelN").innerHTML = "<p id='num' style='color: #cc6600; margin-bottom: 0px;'>Solo pueden ingresar números</p>";
$("#num").fadeTo(4000, 500).slideUp(500, function(){
$("#num").slideUp(500);
});
return false;
}
}
De antemano gracias.