只允许输入中的特定字符答案

【问题标题】：Only allow specific characters in input只允许输入中的特定字符
【发布时间】：2022-01-20 20:45:33
【问题描述】：

我有一个像这样的输入标签：

<input type="text" name="eventstarttime" list="eventstarttime" placeholder="Start Time" required>

为此，它允许有时间，所以从00:00 到12:00。但我基本上也希望允许人们在那里输入，但我希望它被限制为只允许输入基于我拥有的 javascript 的datalist 中显示的值之一，或者只允许输入允许他们输入上述时间之间的时间。这是js：

<% var arrayOfTimes = []; %>                  
              <% for (var i = 0; i <= 48; i++) { %>
                <% var n = Math.floor(i/4) + [":00", ":15", ":30", ":45"][i%4]; %>
                <% if(n<10) %>
                    <% n = ''+n; %>
                <% arrayOfTimes.push(n); %>
                <% console.log(arrayOfTimes); %>
              <% } %>
              <input type="text" name="eventstarttime" list="eventstarttime" placeholder="Start Time" required>
              <datalist id="eventstarttime" required>
                <% for (var i = 0; i < arrayOfTimes.length; i++) { %>
                  <option value="<%= arrayOfTimes[i] %>">
                <% } %>
              </datalist>

返回的结果是这样的：

[
  '0:00',  '0:15',  '0:30',  '0:45',  '1:00',
  '1:15',  '1:30',  '1:45',  '2:00',  '2:15',
  '2:30',  '2:45',  '3:00',  '3:15',  '3:30',
  '3:45',  '4:00',  '4:15',  '4:30',  '4:45',
  '5:00',  '5:15',  '5:30',  '5:45',  '6:00',
  '6:15',  '6:30',  '6:45',  '7:00',  '7:15',
  '7:30',  '7:45',  '8:00',  '8:15',  '8:30',
  '8:45',  '9:00',  '9:15',  '9:30',  '9:45',
  '10:00', '10:15', '10:30', '10:45', '11:00',
  '11:15', '11:30', '11:45', '12:00'
]

所以我希望他们本质上只能输入其中一个值。现在我的问题是，我可以直接通过input 标签来执行此操作，比如具体的字符数和字符类型，还是必须通过 js 来完成？在网上找不到任何东西。

【问题讨论】：

你知道developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time
请考虑：What should I do (✓) when someone answers my question?

标签： javascript html ejs

【解决方案1】：

一个简单的解决方案是在<input> 元素上使用pattern 属性。 Reference

在您的列表中输入任何时间 not，它应该会提示您输入请求的模式。当您输入其中一个次时，它不会提示您。您需要点击submit 按钮才能看到提示。

注意：此输入中的时间可能以 00 开头（如 00:15）。

document.forms[0].onsubmit = e =&gt;e.preventDefault();

<form>
<input pattern="[01]?[0-9]:(15|30|45|00)" placeholder="XX:XX (quarter hour)">
<button>Submit</button>
</form>

【讨论】：

【解决方案2】：

input:invalid+span:after {
  position: absolute;
  content: '✖';
  padding-left: 5px;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
}

div {
  position: relative;
}

<label>Choose a time for your meeting:
<div>
  <input type="time" name="time"
       min="00:00" max="12:00" step="900" required>
   <span class="validity"></span>
 </div>
  <small>from 00:00 to 12:00</small>
</label>

【讨论】：