Motivation
I would like to find a jQuery plugin for handling input mask for inputting violation number(違章編號).
Solution
Go to download meioMask, http://www.meiocodigo.com/projects/meiomask/, to use.
It's very easy to use, and is compatible with :
- Firefox2, Firefox3, Firefox3.5 (Win, Mac, Linux);
- IE6, IE7, IE8 (Win);
- Chrome (Win, Mac, Linux);
- Safari3.2, Safari4 (Win, Mac, iPhone, yes, it supports iPhone!);
- Opera (Win, Mac, Linux).
How to do it
1. download and copy jquery.meio.mask.js to src/webapp/js
2. import jquery.meio.mask.js into your jsp page
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="cui" uri="http://fdc.gov/jsp/taglib/commonui" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<script type="text/javascript" src="<c:url value="/res/js/nig/nig.nig451w.js"/>"></script>
<!-- import jquery.meio.mask.js -->
<script type="text/javascript" src="<c:url value="/res/js/jquery.meio.mask.js"/>"></script>
3. insert input text field for violation number
<cui:portlet titlekey="nig451.title" align="center">
<table class="table-redmond-left" width="98%">
<tr>
<th style="width: 150px;"><cui:msg key="nig451.vioNum" />
</th>
<td><input id="vioNum" name="vioNum" type="text" alt="vioNum"/></td>
</tr>
.....
</table>
</cui:portlet>
4. edit js file, and define input mask for violation number (違章編號)
//文件載入完成後執行
$(document).ready(function() {
...
//define input mask for violation number
$("#vioNum").setMask('999-99-999-9-99999');
});
5. check the result
No comments:
Post a Comment