用jQuery Masked Input Plugin简化版本号输入

问题

需要让用户输入格式为00.00.01.01（点分十进制，11位）的版本号。

现有解决方法

   1:  <input maxlength="2" type="text" id="package_version1" />.
   2:  <input maxlength="2" type="text" id="package_version2" />.
   3:  <input maxlength="2" type="text" id="package_version3" />.
   4:  <input maxlength="2" type="text" id="package_version4" />
   5:  <input size="11" type="hidden" id="package_version" />

我们现有的解决方法是，使用多个用“.”分割text input，让用户在每个text input中输入版本号的一部分。

缺点：难于验证，需要组装版本号片段、拆卸完整的版本号

使用Masked Input Plugin

The masked input plugin allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc).

Masked input plugin使用户可以更简单地输入带有一定格式的数据。当用户把光标置于带有mask的文本框时，会自动出现占位符（默认是“_”）和不可删除的mask literal，而且与mask definition不匹配的字符不能被输入。

Demo：http://digitalbush.com/projects/masked-input-plugin/#demo

Usage：http://digitalbush.com/projects/masked-input-plugin/#usage

应用于我们的项目，可以将用于输入版本号的文本框这样写：

 

<!-- HTML -->
<input type="text" id="package_version" name="package_version" size="11" />

<!-- JavaScript -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput.js"></script>

<script type="text/javascript">
// <![CDATA[
jQuery(function($) {
    $("input#package_version").mask("99.99.99.99");
});
// ]]>
</script>

注意：虽然通过mask可以让用户轻松输入与我们要求的格式一致的版本号，但这并不等于说用户的输入总是合乎要求的，永远不要相信用户的输入，所以依然需要在服务器端验证版本号。

参见

http://digitalbush.com/projects/masked-input-plugin/

http://www.webresourcesdepot.com/javascript-input-masks/，介绍了多种JavaScript实现的masked input