如何在html字段中放置常量符号

Question

我有一个html输入字段

<input name="expiry" type="text" placeholder="MM/YY"/>

我需要输入一个“/”，这样如果用户输入值“06”，它应该在“/”之后，如“06 /”，之后当他进入“13”时，它应该自动位于“/”的右侧，如“06/13”。我希望“/”保持不变，如果用户用2位数字填充MM，光标应该在“右侧” /“等待下一个输入。

Answer 1

使用javascript（jQuery），查看mask plugins：

http://digitalbush.com/projects/masked-input-plugin/
http://igorescobar.github.io/jQuery-Mask-Plugin/

Answer 2

的 FIDDLE

<input name="expiry" type="text" placeholder="MM/YY" maxlength="5"/>

$('input').on('keyup',function() {
  $(this).val($(this).val().replace(/[^0-9/]/g, '')); // Validation
  if($(this).val().length === 2) {
     $(this).val($(this).val() + '/');
  }
});

Answer 3

您将需要2个输入，一个用于月份，另一个用于年份，其中一个/在

之间

Answer 4

另一方面：

HTML5增加了年月输入控件。

<input type=month...

更多信息：http://dev.w3.org/html5/markup/input.month.html

  

具有type属性值为“month”的input元素   表示用于将元素的值设置为字符串的控件   代表一个月。

检查此示例，这正是您的用例：http://html5doctor.com/html5-forms-input-types/#input-month

目前Opera，Chrome和Safari都支持它。 Chrome和Safari识别此标记，但不显示用户界面。

更多信息：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input