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?

Make you and more information? Add a [mcve]? Right now it’s hard to know what’s wrong — evolutionxbox, Mar 22 '20 at 12:09
I guess here is your answer https://stackoverflow.com/questions/28779631/how-to-insert-space-after-four-characters-in-html-input. Match in regular expressions 3 numbers ( in example its 4 numbers) and join with anything u need with .join() method. — Tomal, Mar 22 '20 at 12:14
Take a look at this https://stackoverflow.com/questions/55882171/how-to-auto-format-telephone-numbers-in-an-html-text-input-type-field-using-java — Sharif Mohammad Eunus, Mar 22 '20 at 12:34

score 2 · Answer 1 · answered Mar 22 '20 at 12:51

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()">

score 1 · Answer 2 · answered Mar 22 '20 at 12:40

<!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.

score 1 · Answer 3 · answered Mar 22 '20 at 12:44

<!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>

score 0 · Answer 4 · answered Aug 10 '22 at 16:14

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

4 Answers4