1

I want to change the input field so the user can only write 1 letter and then 7 numbers like s1234567. I tried to make the input field numbers only but then I cant write the first letter.

       <div class="page" id="login-page">
            <h1>Aanmelden</h1>
            <input id="loginInput" placeholder="s1234567">
            <button id="loginButton">login</button>
        </div>
Kemal007023 oz
  • 13
  • 5
  • A possible solution is to make two boxes, one with only one character, another with only numbers and concatenate the result. Could this be done in your context ? – gordon_freeman Oct 01 '20 at 11:06
  • @gordon_freeman no it needs to be in one input box – Kemal007023 oz Oct 01 '20 at 11:09
  • Does this answer your question? [Check if input is number or letter javascript](https://stackoverflow.com/questions/18042133/check-if-input-is-number-or-letter-javascript) – ikiK Oct 01 '20 at 11:10
  • @ikiK not really because I need letters and numbers in one input box but it has to be in this order: s1234567 – Kemal007023 oz Oct 01 '20 at 11:12
  • the user cant type like 1234567s, the s has to be at the beginning – Kemal007023 oz Oct 01 '20 at 11:12
  • So what, write your own JS logic using upper link. Check if first 7 characters are IsNAN and last one is latter... Or whatever you need... – ikiK Oct 01 '20 at 11:12
  • another option would be to use regex to check for and strip incorrect characters, start with `/[a-zA-Z]\d{7}/g` as the correct pattern to check for – RozzA Oct 01 '20 at 11:15

4 Answers4

2

You can use pattern attribute of an input element like so

<input id="loginInput" placeholder="s1234567" pattern="^[a-zA-Z]\d{7}">

Keep in mind that will not match any non English characters like ą, ć and so on.

Reference https://www.w3schools.com/tags/att_input_pattern.asp

baszak
  • 317
  • 1
  • 3
  • 9
1

You can try the below pattern

<input id="loginInput" placeholder="s1234567" pattern="^[A-Za-z]{1}[0-9]{7}">

For more ref : JavaScript RegExp Reference

ikiK
  • 6,328
  • 4
  • 20
  • 40
Rabby
  • 322
  • 4
  • 15
0

You can check your condition on keydown event and allow or disallow the key press

document.getElementById("loginInput").addEventListener("keydown", function (event) {
    let keyCode = event.keyCode == 0 ? event.charCode : event.keyCode;
    if (([8, 9, 46, 36, 35, 37, 39].indexOf(keyCode) !== -1))//allow special chars
        return;
    let symbol = event.key;
    let length = this.value.length;// + 1;
    if (!(length === 0 && symbol.match(/[a-zA-Z]/i) || (length < 8 && !isNaN(symbol)))) {
        event.preventDefault();
        return;
    }
});
<div class="page" id="login-page">
    <input id="loginInput" pattern="^[A-Za-z]{1}[0-9]{7}" placeholder="s1234567">
</div>
angel.bonev
  • 2,154
  • 3
  • 20
  • 30
0

Hello mate I have built something similar. I think you have to form a regex more specific to your scenario and replace it in my code. check this fiddle

Html:

<input id="loginInput" placeholder="s1234567" pattern="^[A-Za-z]{1}[0-9]{7}" oninput="myFunction()">

JS:

var inputBox = document.getElementById('loginInput');
console.log("script is running");
  
function myFunction() {
console.log("inside change");
  var content = inputBox.value;
  var pattern = new RegExp(/^([A-Za-z]{1})*[0-9]{0,7}/);
    var isMatching = pattern.test(content);
  console.log("is matching", isMatching);
  if(!isMatching){
    inputBox.value = content.slice(0, content.length - 1);
  }
}
naveen ashok
  • 311
  • 1
  • 16
  • your pattern will match any amount of letters or 0-7 numbers, it also matches on empty strings - this may be unintended behavior and you should revise your pattern. – RozzA Oct 01 '20 at 13:21
  • yes @RozzA. If we could find a new pattern and change it this will meet the requirement. – naveen ashok Oct 01 '20 at 18:17