Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Mặt nạ nhập liệu
URL: https://www.javascriptbank.com/text-input-masker.html
Hiệu ứng này sử dụng thư viện Prototype để cài đặt các mặt nạ nhập liệu, mỗi khi được thiết kế, người dùng chỉ cần nhập vào các dữ liệu cần thiết, hiệu ứng sẽ tự động phân tích và đưa về đúng cấu trúc qui định.
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Mặt nạ nhập liệu
URL: https://www.javascriptbank.com/text-input-masker.html
<script type="text/javascript" src="prototype.js"></script><script type="text/javascript"><!--//Created by: Baron Schwartz :: http://www.xaprb.com//* * Copyright (C) 2006 Baron Schwartz <baron at xaprb dot com> * http://www.xaprb.com/html-input-mask/html-form-input-mask.html * This program is free software; you can redistribute it and/or modify it * under the terms of the GNU Lesser General Public License as published by the * Free Software Foundation, version 2.1. * * This program is distributed in the hope that it will be useful, but WITHOUT * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more * details. * * $Id: html-form-input-mask.js,v 1.6 2006-11-03 04:04:29 baron Exp $ *//* Set up a global Xaprb object to act as the Xaprb namespace, without colliding * with other Xaprb scripts. */if ( typeof(Xaprb) === 'undefined' ) { Xaprb = new Object();}/* The Xaprb.InputMask object acts as the namespace for input masking * functionality. */Xaprb.InputMask = { /* Each mask has a format and regex property. The format consists * of spaces and non-spaces. A space is a placeholder for a value the user * enters. A non-space is a literal character that gets copied to that * position in the value. The regex is used to validate each character, one * at a time (it is not applied against the entire value in the form field, * just the characters the user enters). * * The way you name your masks is significant. If you create a mask called * date_us, you cause it to be applied to a form field by a) adding the * input_mask class to that form field, which triggers this script to treat * it specially, and b) adding the class mask_date_us to the form field, * which causes this script to apply the date_us mask to it. */ masks: { date_iso: { format: ' - - ', regex: /d/ }, date_us: { format: ' / / ', regex: /d/ }, time: { format: ' : : ', regex: /d/ }, phone: { format: '( ) - ', regex: /d/ }, ssn: { format: ' - - ', regex: /d/ }, visa: { format: ' - - - ', regex: /d/ } }, /* Finds every element with class input_mask and applies masks to them. */ setupElementMasks: function() { if ( document.getElementsByClassName ) { // Requires the Prototype library document.getElementsByClassName('input_mask').each(function(item) { Event.observe(item, 'keypress', Xaprb.InputMask.applyMask.bindAsEventListener(item), true); }); } }, /* This is triggered when the key is pressed in the form input. It is * bound to the element, so 'this' is the input element. */ applyMask: function(event) { var match = /mask_(w+)/.exec(this.className); if ( match.length == 2 && Xaprb.InputMask.masks[match[1]] ) { var mask = Xaprb.InputMask.masks[match[1]]; var key = Xaprb.InputMask.getKey(event); if ( Xaprb.InputMask.isPrintable(key) ) { var ch = String.fromCharCode(key); var str = this.value + ch; var pos = str.length; if ( mask.regex.test(ch) && pos <= mask.format.length ) { if ( mask.format.charAt(pos - 1) != ' ' ) { str = this.value + mask.format.charAt(pos - 1) + ch; } this.value = str; } Event.stop(event); } } }, /* Returns true if the key is a printable character. */ isPrintable: function(key) { return ( key >= 32 && key < 127 ); }, /* Returns the key code associated with the event. */ getKey: function(e) { return window.event ? window.event.keyCode : e ? e.which : 0; }};function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } }}addLoadEvent(function() { Xaprb.InputMask.setupElementMasks();});//--></script><form action="" method="get"> <table> <tbody><tr> <td>Date (US format):</td> <td><input id="input_date" class="text input_mask mask_date_us" type="text"></td> </tr><tr> <td>Time:</td> <td><input id="input_time" class="text input_mask mask_time" type="text"></td> </tr><tr> <td>Phone number:</td> <td><input id="input_phone" class="text input_mask mask_phone" type="text"></td> </tr> </tbody></table></form>Requires the Prototype JavaScript framework, available at <a href="http://www.prototypejs.org/">the Prototype Web site</a>.
/javascript/form/Text_Input_Masker/prototype.js