Javascript 如何使用javacscipt输入1个字母和7个数字

我想更改输入字段，这样用户只能写1个字母，然后写7个数字，如s1234567。 我试着只写输入字段的数字，但是我写不出第一个字母

       <div class="page" id="login-page">
            <h1>Aanmelden</h1>
            <input id="loginInput" placeholder="s1234567">
            <button id="loginButton">login</button>
        </div>

安梅尔登
登录

您可以像这样使用输入元素的模式属性

---

您可以像这样使用输入元素的模式属性

---

您可以尝试以下模式

---

您可以尝试以下模式

---

您可以检查您的状态并允许或不允许按键

document.getElementById（“loginInput”）.addEventListener（“keydown”，函数（事件）{
让keyCode=event.keyCode==0？event.charCode:event.keyCode；
if（[8,9,46,36,35,37,39].indexOf（keyCode）！==-1））//允许特殊字符
回来
让symbol=event.key；
设length=this.value.length；//+1；
if（！（长度===0&&symbol.match（/[a-zA-Z]/i）| |（长度<8&&isNaN（symbol）））{
event.preventDefault（）；
回来
}
});
您可以检查您的状态并允许或不允许按键


document.getElementById（“loginInput”）.addEventListener（“keydown”，函数（事件）{
让keyCode=event.keyCode==0？event.charCode:event.keyCode；
if（[8,9,46,36,35,37,39].indexOf（keyCode）！==-1））//允许特殊字符
回来
让symbol=event.key；
设length=this.value.length；//+1；
if（！（长度===0&&symbol.match（/[a-zA-Z]/i）| |（长度<8&&isNaN（symbol）））{
event.preventDefault（）；
回来
}
});
你好，伙计，我也做了类似的事情。我认为您必须形成一个更适合您的场景的正则表达式，并在我的代码中替换它

Html:

你好，伙计，我也做了类似的东西。我认为您必须形成一个更适合您的场景的正则表达式，并在我的代码中替换它

Html:

一种可能的解决方案是制作两个框，一个框只有一个字符，另一个框只有数字，并将结果串联起来。这能在你的环境中完成吗？@gordon_freeman不，它需要在一个输入框中完成这能回答你的问题吗@ikiK并不是因为我需要在一个输入框中输入字母和数字，而是必须按如下顺序：S1234567用户不能像1234567s那样输入，s必须在开头。一个可能的解决方案是制作两个框，一个框只有一个字符，另一个框只有数字并连接结果。这能在你的环境中完成吗？@gordon_freeman不，它需要在一个输入框中完成这能回答你的问题吗@ikiK并不是因为我需要在一个输入框中输入字母和数字，而是它必须是这样的顺序：S1234567用户不能像1234567s那样输入，s必须在开头
{1}
不需要（它没有任何影响），它是
\d
，而不是
/d
。我建议使用[a-zA-Z]为了只匹配英文字符，我为您制作了一把小提琴，以便您可以查看是否复制粘贴占位符，它仍然无效。
{1}
不需要（它没有任何影响），它是
\d
，而不是
/d
。我建议使用[a-zA-Z]为了只匹配英文字符，我为您制作了一把小提琴，以便您查看是否复制粘贴占位符，占位符仍然无效。您的图案将匹配任意数量的字母或0-7个数字，它也匹配空字符串-这可能是意外行为，您应该修改图案。是@RozzA。如果我们可以找到一个新的模式并对其进行更改，这将满足要求。您的模式将匹配任意数量的字母或0-7数字，它也匹配空字符串-这可能是意外行为，您应该修改您的模式。是@RozzA。如果我们能找到一个新模式并改变它，这将满足要求。有趣的方法但它完美地工作（在firefox上）有趣的方法但它完美地工作（在firefox上）不需要隐式的
{1}
，并且
[0-9]
可以写成
\d
不需要
{1}
是隐式的，
[0-9]
可以写成
\d
<input id="loginInput" placeholder="s1234567" pattern="^[A-Za-z]{1}[0-9]{7}" oninput="myFunction()">

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);
  }
}