Mask only for the phone, moving the cursor to the beginning of the input, how to do?

  • 0
    Hello everyone.

    Found a simple mask script for the phone, only needed for the phone, did not download large files, where there are different masks.
    We need a slight modification of the mask, if you put the cursor when we enter the imput in the field, then you can put a dotted line at the very end, and how to make it to the beginning of the parenthesis +7 (
    Modify so that it was impossible to put a dotted line at the end +7 (___) ___-_____ | , well, or if put, then threw to the beginning of the parentheses where we enter.
    Well, or do so, press and +7 appears and then we write and the brackets themselves (___) are substituted, so do not put a dotted line at the end, because the beginning will go from +7.

    Working scheme
    https://jsfiddle.net/7reby9w6/1/
    JavaScript Anonymous, Feb 2, 2019

  • 1 Answers
  • 0
    is it okay?

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    <input id="inputPhone" value="+7(___)___-__-__" >
    <script>
    let inputPhone=document.getElementById("inputPhone");
    inputPhone.oninput=()=>phoneMask(inputPhone)
    function phoneMask(inputEl) {
    let patStringArr = "+7(___)___-__-__".split('');
    let arrPush = [3, 4, 5, 7, 8, 9, 11, 12, 14, 15]
    let val = inputEl.value;
    let arr = val.replace(/\D+/g, "").split('').splice(1);
    let n;
    let ni;
    arr.forEach((s, i) => {
    n = arrPush[i];
    patStringArr[n] = s
    ni = i
    });
    arr.length < 10 ? inputEl.style.color = 'red' : inputEl.style.color = 'green';
    inputEl.value = patStringArr.join('');
    n ? inputEl.setSelectionRange(n + 1, n + 1) : inputEl.setSelectionRange(17, 17)
    }
    </script>
    </body>
    </html>
    Cora Chavez

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!