Auto-format html input type tel

Question

I have a problem with add auto Spaced in Input Tel. I would like to add a 9-digit number so that every 3 digits take a break (spaces or pauses) like +880 111 222 333 . Someone could explain how to achieve it?

Answer 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <form action="" method="GET">
        <input type="tel" name="phone" id="phone" pattern="[0-9 -+()]{11,11}">
         <input type="submit" value="Submit" >
    </form>
</body>
</html>
<script>

    let itemInput=document.querySelector('input[type=tel]') ;

    itemInput.addEventListener('keypress',phone);
    function phone()
      {
          let p=this.value;
          if((p.length+1)%4==0 && p.length<9)  this.value=p+" ";
      }
</script>

XXX XXX XXX only accepts numbers that are 0-9 in this view.try one.

Answer 2

 <!DOCTYPE html> <html> <head> <script> function inNumber(elm){ if (!elm.value) return elm.value = elm.value.replace(/ /g, '') } function withSpaces(elm) { if (!elm.value|| isNaN(elm.value) || elm.value.length < 3) return elm.value = elm.value.replace(/\\B(?=(\\d{3})+(?!\\d))/g, " ");; } </script> </head> <body> <p>Enter any number value and press tab </p> <input id="0" onblur="withSpaces(this)" onfocus="inNumber(this)"> </body> </html>

Answer 3

 function addSpace(){ var inputValue = document.getElementById("telInput").value; var inputValueLength = inputValue.length; if(inputValueLength == 3 || inputValueLength == 7){ document.getElementById("telInput").value = inputValue+" "; } }

 <input type="tel" id="telInput" onkeypress="addSpace()">

Answer 4

JQuery:

<input type="tel" placeholder="123-456-7890" maxlength="12" id="phone" >

<script>
  jQuery(document).ready(function() {
    $("#phone").keyup(function() {
      var number = $(this).val();
      var lngth = number.length;
      if (lngth == 3 || lngth == 7) {
        $("#phone").val(number + "-")  ;
      } else if (lngth >12 ) {
        $("#phone").val(number.slice(0,12));
      }
    })
  });
</script>

Maybe maxlength="12" and else if (lngth >12 ) is redundant but it doesn't hurt either

Auto-format html input type tel

Question

4 answers

solution1
1 2020-03-22 12:40:54

solution2
1 2020-03-22 12:44:24

solution3
1 2020-03-22 12:51:32

solution4
0 2022-08-10 16:14:32

Auto-format html input type tel

Question

4 answers

solution1 1 2020-03-22 12:40:54

solution2 1 2020-03-22 12:44:24

solution3 1 2020-03-22 12:51:32

solution4 0 2022-08-10 16:14:32

solution1
1 2020-03-22 12:40:54

solution2
1 2020-03-22 12:44:24

solution3
1 2020-03-22 12:51:32

solution4
0 2022-08-10 16:14:32