只允许输入特定字符

Question

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

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

为此，允许有时间在里面，所以从00:00到12:00的任何地方。但我基本上也想允许人们在那里输入时间，但我希望它被限制为只允许输入基于 [=25= 的 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 来完成？无法在线找到任何内容。

Answer 1

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

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

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

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

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

Answer 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>

只允许输入特定字符

Only allow specific characters in input

html

javascript

ejs