CODEWITHSUNDEEP
javascript
Hamza Mughal
Hamza Mughal

Reputation: 13

Javascript: Only allow 7 digits for input and automatically add hyphen(-) after only 3rd number

I want to restrict the input field in the following manner.

What I have tried

On keyup event of input field I am calling keyUpValidation method

keyUpValidation(event) {
   let value = event.target.value;
   document.getElementById('input').value = value.replace(/[^0-9]/g, "").replace(/(\..*?)\..*/g, "$1");
   if (value.length == 3) {
    document.getElementById('input').value = value + "-";
   }
},

What does this code do?

It doesn't allow the user to add anything other than digit/number also insert hyphen (-) after the 3rd digit but as soon as the user inputs the 4th digit the hyphen(-) is getting replaced.

Upvotes: 0

Views: 973

Answers (2)

code
code

Reputation: 6321

You can use two inputs. Take this commented example (updated to allow copy-pasting ease):

const wrapper = document.getElementById("wrapper"),
  p1 = document.getElementById("p1"),
  dash = document.getElementById("dash"),
  p2 = document.getElementById("p2");

p1.addEventListener("input", e => {
  // if length is 3
  if (p1.value.length >= 3) {
    e.preventDefault(); // prevent extra text from being added
    dash.style.visibility = "visible"; // show dash
    p2.removeAttribute("disabled"); // remove disabled
    let remainingValues = p1.value.slice(3); // get next four values
    p1.value = p1.value.substring(0, 3);
    p1.setAttribute("disabled", "true");
    p2.value = remainingValues.substring(0, 4); // set value for next element; limit to 4; enhance copy-pasting as users will likely copy-paste
    if (p2.value.length === 4) {
      p2.setAttribute("disabled", "true");
      const userInput = p1.value + p2.value; // done
      done(userInput);
    }
    p2.focus(); // focus
  }
});
p2.addEventListener("input", e => {
  if (p2.value.length >= 4) {
    p2.setAttribute("disabled", "true"); // disable to prevent extra text
    const userInput = p1.value + p2.value; // done
    done(userInput);
  }
});

wrapper.addEventListener("click", e => {
  p1.focus(); // emulate input focus
});
// uncomment to autofocus:
// p1.focus();

function done(val) {
  console.log(val);
}
/*some styles to make the wrapper look like an input*/

#wrapper {
  border: 1px solid lightgray;
  border-radius: 3px;
  padding: 5px 10px;
  width: fit-content;
  transition: .2s;
}

#wrapper:focus-within {
  border: 1px solid gray;
}

#wrapper,
#wrapper * {
  cursor: text;
}

input[type="number"] {
  outline: none;
  border: none;
  background-color: transparent;
  -moz-appearance: textfield;
}


/*remove the step button on numbers*/

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

#dash {
  visibility: hidden;
}

#p1 {
  width: 25px;
}

#p2 {
  width: 30px;
}
<p>Test copy-paste&mdash;copy: 1234567</p>
<!--using a wrapper div to emulate an input-->
<div id="wrapper">
  <input type="number" id="p1" />
  <span id="dash">-</span>
  <input type="number" id="p2" disabled />
</div>

Upvotes: 1

Ali Yaghoubi
Ali Yaghoubi

Reputation: 1280

You can use maxlength property in html: See Docs

<input type="number" maxlength="7" />

Use this Pattern for separate numbers

const pattern = new RegExp("(-?[0-9]{3})([0-9]*)");

Accept only integer type

const pattern = new RegExp("[^0-9]", "ig");

Upvotes: 0

Related Questions