我用Node.js编写了一个小型Web应用程序,其中只有一行,用户可以在其中输入一个或多个用逗号分隔的邮箱地址:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>eHaW Email</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/bootstrap.bundle.min.js"></script>
  </head>
  
  <body>

    <form action="/createMsg" method="POST">
      <div class="form-group mb-3 mt-3 ms-1 me-1">
        <label for="text" class="control-label">From:</label>
        <input type="text" class="form-control" id="from" 
               placeholder="Enter your name" name="from" 
               required />
      </div>
      <div class="form-group mb-3 mt-3 ms-1 me-1">
        <label for="email" class="control-label">To:</label>
        <input type="email" multiple class="form-control" id="to" 
               placeholder="Enter 1 or more email addresses, separated by commas ','" name="email" required />
        <button type="button" id="addComma" onclick="insertComma">,</button>
        <input type="text" class="form-control" id="mType" 
               name="mType" readonly hidden required >
      </div>
      <div class="form-group mb-3 mt-3 ms-1 me-1">
        <label for="msg" class="control-label">Message:</label>
        <textarea type="text" class="form-control" id="message" 
               placeholder="Enter the message you want to send here..." 
               name="msg" rows="5" onkeyup="countChars(this);" required ></textarea>
        <p class="text-secondary" id="charNum">1000 characters remaining</p>
      </div>
      <div class="mx-auto" style="width:350px" align="center">
        <button type="submit" class="btn btn-outline-success">Submit</button>
      </div>
    </form>
    <p> </p>
    <div class="row">
      <div class="col" align="right">
        <form action="/" method="GET">
          <button type="submit" class="btn btn-danger">Cancel</button>
        </form>
      </div>
      <div class="col" align="left">
        <form action="/status" method="GET">
          <button type="submit" class="btn btn-warning" >Status</button>
        </form>
      </div>
    </div>
  </body>
</html>

<script>
  document.getElementById("addComma").addEventListner("click", (e) => {
    const item = document.getElementById("to");
    item.value = += ", ";
    item.focus();
  });

  function countChars(obj){
    let maxLength = 1000;
    let strLength = obj.value.length;
    let charRemain = maxLength - strLength;
    
    if(charRemain < 0){
        document.getElementById("charNum").innerHTML = '<span style="color: red;">You have exceeded the limit of '+maxLength+' characters</span>';
    }else{
        document.getElementById("charNum").innerHTML = charRemain+' characters remaining';
    }
    document.getElementById("mType").value = "Email";
  }

  function goBack() {
    window.history.back();
  }
</script>

当有iPhone的人想要输入多个邮箱地址时,我遇到了一个问题,因为iPhone上的邮箱输入键盘不包括逗号字符.如果用户try 使用空格字符作为分隔符,上面的代码将声明该条目无效.

有没有办法指定另一个分隔符?

推荐答案

您可以在表单中添加一个comma按钮,从而在to字段的末尾插入一个", ".

Html:

<button id="addComma">Comma</button>

JavaScrip:

document.getElementById("addComma").addEventListener("click", (e) => {
    const item = document.getElementById("to");
    item.value += ", ";
    item.focus();
});

工作代码段:

document.getElementById("addComma").addEventListener("click", (e) => {
    const item = document.getElementById("to");
    item.value += ", ";
    item.focus();
});
<input type="email" multiple class="form-control" id="to" 
         placeholder="Enter 1 or more email addresses, separated by commas ','" 
         name="email" required />
 
 <button id="addComma">Comma</button>


您try 实施此操作有多个问题:

  1. go 掉onclick="insertComma".没有名为insertComma()的函数,并且您已经以不同的方式添加了客户端事件侦听器.

  2. 把这个item.value = += ", ";改成这个item.value += ", ";.我不知道您为什么要添加额外的+,但这是无效的语法.

  3. 修改.addEventListener的拼写,如下所示.

在许多情况下,当此代码执行时,您应该能够通过查看浏览器控制台来查看您的错误,并查看它所抱怨的错误.这就是我在这里诊断您的代码所做的全部工作.

Html相关问答推荐

我似乎不能正确地将我的导航栏居中'

Select 包含iframe的图形<><>

当表头包含特殊字符时,R Quarto发布的HTML表中不必要的大列宽

在iOS中调整HTML邮箱内容的大小

为什么在移动视图中,这个水平可滚动的表格会在表格的右侧显示额外的空间?

当光标悬停在(相同)父元素上方时,为多个子元素创建不同的过渡动画

响应网格,响应调整大小以适应父div,保留父div S自己的响应高度

SVG动画只有在打开S开发工具的浏览器时才开始播放

OnChange函数未在下拉列表中使用一个选项触发

将导航项目底部边框与导航栏对齐

HTMLTag属性内的svelte+TS类型声明

`table>;的消失;tbody:nth子级(1)`HTML

按钮悬停效果不影响按钮内的图标

第 117 行的块标记无效:endblock,应为empty或endfor.您是否忘记注册或加载此标签?

当我们在vue中使用截断大文本时如何显示标题属性?

网页设计不适合移动设备

pandas `to_html()` - 如何只使特定的行有边框

如何从 razor 页面打开 html 页面

如果不透明的元素出现在下方,为什么不透明度会使一个元素出现在另一个元素上方?

在不扭曲图像的情况下将图像放入灵活的 Div 框内