Force a specific pattern into a textbox

how to restrict special characters in textbox using c#
allow only characters in textbox in c#
html input restrict characters
html5 pattern for alphabets only
how to validate textbox to accept only characters in asp.net c#
allow special characters in textbox c#
html pattern for name with space
html input pattern numbers only

I have a web page with a text box on it. Currently through some javascript the text box only allows you to type numbers or a minus sign or dash - .

My question is that I would like a way to further force the input to be in the form of 3 numbers followed by a '-' then followed by 2 more numbers and that's it. So it looks like ###-## every time its entered. I've tried lots of ways so far like this code.

<input type="text" name="Item1" id = "Item1" value="" type="number" pattern="(0){3}-(0){2}" onkeypress="return isNumberKey(event)"/></input>

But the pattern didn't work. Any suggestions to where I should start some research or sample code would be great. I was hoping it might be achievable in CSS but javascript will do.

input to be in the form of 3 numbers followed by a '-' then followed by 2 more numbers

let inputHandler = function(e) {
  var tmp = this.value.replace(/[^0-9]/g, '').split('');
  if (3 < tmp.length) {
    tmp.splice(3, 0, '-');
  }
  this.value = tmp.join('').substr(0, 6);
};

document.addEventListener('DOMContentLoaded', function(e) {
  document.querySelectorAll('[name=Item1]').forEach(function(inp) {
    inp.addEventListener('input', inputHandler);
  });
});
input {
  margin: 2px;
}
<input type="text" name="Item1" /><input type="text" name="Item1" /><input type="text" name="Item1" />

Only allow specific characters in textbox, As mentioned in a comment (and another answer as I typed) you need to register an event handler to catch the keydown or keypress event on a text box. This is  Definition and Usage. The pattern attribute specifies a regular expression that the <input> element's value is checked against on form submission. Note: The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.

Following pattern should do the trick.

[0-9]{3}-?[0-9]{2}

As in

<input type="text" name="Item1" id = "Item1" value="" type="number" pattern="[0-9]{3}-?[0-9]{2}" onkeypress="return isNumberKey(event)"/></input>

Validate Textbox Answer Formats, In addition to a standard Textbox question, you are given the option to choose from the If you select a numeric validation, you can choose to Force RegEx pattern is a sequence of characters that is used to validate specific  Force a specific pattern into a textbox I have a web page with a text box on it. Currently through some javascript the text box only allows you to type numbers or a minus sign or dash - .

The pattern you are looking for is :

[0-9]{3}-[0-9]{2}

Expanding on this,

[0-9]        : accepts any value from 0 to 9
<pattern>{x} : specifies how many times <pattern> should be matched
[0-9]{3}     : match value from 0 to 9 three times

<form>
  <input type="text" name="Item1" id = "Item1" value="" type="number" pattern="[0-9]{3}-[0-9]{2}">
  <input type="submit">
</form>

HTML pattern Attribute, Tip: Learn more about regular expressions in our JavaScript tutorial. Applies to. The pattern attribute can be used on the following element: Element, Attribute. <  HTML: Forcing INPUT text to uppercase Tweet 2 Shares 0 Tweets 6 Comments. So you have a form where you want to only accept UPPER CASE text in certain input or textarea fields. There are a number of ways to tackle this ranging from JavaScript to HTML5 patterns, CSS, and server-side code. Some are really annoying. Using JavaScript to alter text

Form Input Validation Using Only HTML5 and Regex, When no value is specified for the type attribute, the type is set to text by default. Here are some examples of using regex with the pattern attribute. will force users to enter information in an input field in a certain format. In this tutorial you’ll learn how to format, real time, user input in a form field. As a user types something into an input field the value will be adjusted automatically, adding things like punctuation and dashes, trimming spaces, removing unexpected characters, and changing the word-casing.

Power Apps Text Input Pattern Validation, Do you ever have a form with a text box for someone to type their phone what in the string of text matches a certain pattern, such as finding an  However by writing few lines code under Textbox Change Event, you can achieve this. Here in this Article you learn how to achieve all these settings in VBA Textbox. This is possible by using 2 functions: 1. StrConv() and 2. LCase or UCase. How to force input to Upper case in VBA Textbox: By using StrConv() function in VB

Masked Textbox - Validation & Visibility, Changing User Password · Disabling a User Account · Force User to Change These components will require Users to input valid Values into Textboxes. Start in Next, add Masked Text box for Hex Value and configure it with the following pattern for I have 2 to 6 because of the country-specific TLD's (.ny.us or .co.uk). You can use the wildCards parameter to specify a specific pattern. An empty collection is returned if no matching files are found. You can use the CopyFile method to copy the files to a directory. To copy files with a specific pattern to a directory. Use the GetFiles method to return the list of files. This example returns all .rtf files in the

Comments
  • AFAIK, pattern won't work with type="number". FYI, you have multiple type attributes
  • are you looking for a Javascript implementation for this or something else?
  • This is perfect but all answers were good thanks guys...This one wins because you cant type it in wrong and it adds a dash automatically..so awesome