带有“：”和“。”的 Iphone 和 Android 号码字段允许字符？

Question

我需要一个允许字符“：”和“。”的数字字段。要提交。我基本上需要一个默认为用户使用字母数字键盘的文本字段，因为通常他们会输入时间“2”或“3.3”（有时他们会输入“1:30”）。这是我确实拥有的代码，但在某些 Android 设备上，webview 搞砸了，人们无法在 mobile_form_hours 字段中输入任何内容。有人有其他想法吗？我尝试在提交表单之前将其保留为数字字段并将其更改为文本字段，或者在提交按钮上按下鼠标，但这两者都不起作用。

  <input type="text" id="mobile_form_hours" /> 

  $(document).on 'touchstart', '#mobile_form_hours', ->
    $(this).attr('type', 'number');

  $(document).on 'keydown blur', '#mobile_form_hours', ->
    $(this).attr('type', 'text');

Answer 1

您可以在 2 个单独的数字字段中将其拆分为小时和分钟，然后再使用串联。我不认为一个号码可以包含:...

<input type="number" id="mobile_form_hours" /> :
<input type="number" id="mobile_form_minutes" /> 

当您在代码中需要它时，您可以使用：

var timeAsString = $('#mobile_form_hours').val() + ":" + $('#mobile_form_minutes').val();

这将使您能够更好地控制用户可以输入的内容，并降低因输入单词而导致错误的风险（总有一个用户试图破坏所有内容）

Answer 2

您可以使用pattern attribute 来设置您想要的正则表达式。

/* NOTE: This CSS is just for the live example and is not necessary,
   it's the HTML you want. */
input {width: 200px; border: 1px solid #ccc; background: #fff;}
input:valid {border-color: green; background: #eeffee;}
input:invalid {border-color: red; background: #ffeeee;}

<input type="text" name="mobile_form_hours" pattern="\d{1,2}[\.:]\d{1,2}" placeholder="Enter a time, such as 3:45 or 2.5" required>

示例中的模式值允许一到两位数字，后跟一个句点或冒号，再跟另一个一到两位数字。如果您只想允许任何一系列数字、句点和冒号，您可以使用以下值：[\d:\.]+

请注意，无论您如何在浏览器中强制执行您的值，您还必须在服务器上进行验证。