Qiang Xue
12 years ago
5 changed files with 547 additions and 2 deletions
@ -0,0 +1,338 @@
|
||||
/* |
||||
Masked Input plugin for jQuery |
||||
Copyright (c) 2007-2013 Josh Bush (digitalbush.com) |
||||
Licensed under the MIT license (http://digitalbush.com/projects/masked-input-plugin/#license)
|
||||
Version: 1.3.1 |
||||
*/ |
||||
(function($) { |
||||
function getPasteEvent() { |
||||
var el = document.createElement('input'), |
||||
name = 'onpaste'; |
||||
el.setAttribute(name, ''); |
||||
return (typeof el[name] === 'function')?'paste':'input';
|
||||
} |
||||
|
||||
var pasteEventName = getPasteEvent() + ".mask", |
||||
ua = navigator.userAgent, |
||||
iPhone = /iphone/i.test(ua), |
||||
android=/android/i.test(ua), |
||||
caretTimeoutId; |
||||
|
||||
$.mask = { |
||||
//Predefined character definitions
|
||||
definitions: { |
||||
'9': "[0-9]", |
||||
'a': "[A-Za-z]", |
||||
'*': "[A-Za-z0-9]" |
||||
}, |
||||
dataName: "rawMaskFn", |
||||
placeholder: '_', |
||||
}; |
||||
|
||||
$.fn.extend({ |
||||
//Helper Function for Caret positioning
|
||||
caret: function(begin, end) { |
||||
var range; |
||||
|
||||
if (this.length === 0 || this.is(":hidden")) { |
||||
return; |
||||
} |
||||
|
||||
if (typeof begin == 'number') { |
||||
end = (typeof end === 'number') ? end : begin; |
||||
return this.each(function() { |
||||
if (this.setSelectionRange) { |
||||
this.setSelectionRange(begin, end); |
||||
} else if (this.createTextRange) { |
||||
range = this.createTextRange(); |
||||
range.collapse(true); |
||||
range.moveEnd('character', end); |
||||
range.moveStart('character', begin); |
||||
range.select(); |
||||
} |
||||
}); |
||||
} else { |
||||
if (this[0].setSelectionRange) { |
||||
begin = this[0].selectionStart; |
||||
end = this[0].selectionEnd; |
||||
} else if (document.selection && document.selection.createRange) { |
||||
range = document.selection.createRange(); |
||||
begin = 0 - range.duplicate().moveStart('character', -100000); |
||||
end = begin + range.text.length; |
||||
} |
||||
return { begin: begin, end: end }; |
||||
} |
||||
}, |
||||
unmask: function() { |
||||
return this.trigger("unmask"); |
||||
}, |
||||
mask: function(mask, settings) { |
||||
var input, |
||||
defs, |
||||
tests, |
||||
partialPosition, |
||||
firstNonMaskPos, |
||||
len; |
||||
|
||||
if (!mask && this.length > 0) { |
||||
input = $(this[0]); |
||||
return input.data($.mask.dataName)(); |
||||
} |
||||
settings = $.extend({ |
||||
placeholder: $.mask.placeholder, // Load default placeholder
|
||||
completed: null |
||||
}, settings); |
||||
|
||||
|
||||
defs = $.mask.definitions; |
||||
tests = []; |
||||
partialPosition = len = mask.length; |
||||
firstNonMaskPos = null; |
||||
|
||||
$.each(mask.split(""), function(i, c) { |
||||
if (c == '?') { |
||||
len--; |
||||
partialPosition = i; |
||||
} else if (defs[c]) { |
||||
tests.push(new RegExp(defs[c])); |
||||
if (firstNonMaskPos === null) { |
||||
firstNonMaskPos = tests.length - 1; |
||||
} |
||||
} else { |
||||
tests.push(null); |
||||
} |
||||
}); |
||||
|
||||
return this.trigger("unmask").each(function() { |
||||
var input = $(this), |
||||
buffer = $.map( |
||||
mask.split(""), |
||||
function(c, i) { |
||||
if (c != '?') { |
||||
return defs[c] ? settings.placeholder : c; |
||||
} |
||||
}), |
||||
focusText = input.val(); |
||||
|
||||
function seekNext(pos) { |
||||
while (++pos < len && !tests[pos]); |
||||
return pos; |
||||
} |
||||
|
||||
function seekPrev(pos) { |
||||
while (--pos >= 0 && !tests[pos]); |
||||
return pos; |
||||
} |
||||
|
||||
function shiftL(begin,end) { |
||||
var i, |
||||
j; |
||||
|
||||
if (begin<0) { |
||||
return; |
||||
} |
||||
|
||||
for (i = begin, j = seekNext(end); i < len; i++) { |
||||
if (tests[i]) { |
||||
if (j < len && tests[i].test(buffer[j])) { |
||||
buffer[i] = buffer[j]; |
||||
buffer[j] = settings.placeholder; |
||||
} else { |
||||
break; |
||||
} |
||||
|
||||
j = seekNext(j); |
||||
} |
||||
} |
||||
writeBuffer(); |
||||
input.caret(Math.max(firstNonMaskPos, begin)); |
||||
} |
||||
|
||||
function shiftR(pos) { |
||||
var i, |
||||
c, |
||||
j, |
||||
t; |
||||
|
||||
for (i = pos, c = settings.placeholder; i < len; i++) { |
||||
if (tests[i]) { |
||||
j = seekNext(i); |
||||
t = buffer[i]; |
||||
buffer[i] = c; |
||||
if (j < len && tests[j].test(t)) { |
||||
c = t; |
||||
} else { |
||||
break; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
function keydownEvent(e) { |
||||
var k = e.which, |
||||
pos, |
||||
begin, |
||||
end; |
||||
|
||||
//backspace, delete, and escape get special treatment
|
||||
if (k === 8 || k === 46 || (iPhone && k === 127)) { |
||||
pos = input.caret(); |
||||
begin = pos.begin; |
||||
end = pos.end; |
||||
|
||||
if (end - begin === 0) { |
||||
begin=k!==46?seekPrev(begin):(end=seekNext(begin-1)); |
||||
end=k===46?seekNext(end):end; |
||||
} |
||||
clearBuffer(begin, end); |
||||
shiftL(begin, end - 1); |
||||
|
||||
e.preventDefault(); |
||||
} else if (k == 27) {//escape
|
||||
input.val(focusText); |
||||
input.caret(0, checkVal()); |
||||
e.preventDefault(); |
||||
} |
||||
} |
||||
|
||||
function keypressEvent(e) { |
||||
var k = e.which, |
||||
pos = input.caret(), |
||||
p, |
||||
c, |
||||
next; |
||||
|
||||
if (e.ctrlKey || e.altKey || e.metaKey || k < 32) {//Ignore
|
||||
return; |
||||
} else if (k) { |
||||
if (pos.end - pos.begin !== 0){ |
||||
clearBuffer(pos.begin, pos.end); |
||||
shiftL(pos.begin, pos.end-1); |
||||
} |
||||
|
||||
p = seekNext(pos.begin - 1); |
||||
if (p < len) { |
||||
c = String.fromCharCode(k); |
||||
if (tests[p].test(c)) { |
||||
shiftR(p); |
||||
|
||||
buffer[p] = c; |
||||
writeBuffer(); |
||||
next = seekNext(p); |
||||
|
||||
if(android){ |
||||
setTimeout($.proxy($.fn.caret,input,next),0); |
||||
}else{ |
||||
input.caret(next); |
||||
} |
||||
|
||||
if (settings.completed && next >= len) { |
||||
settings.completed.call(input); |
||||
} |
||||
} |
||||
} |
||||
e.preventDefault(); |
||||
} |
||||
} |
||||
|
||||
function clearBuffer(start, end) { |
||||
var i; |
||||
for (i = start; i < end && i < len; i++) { |
||||
if (tests[i]) { |
||||
buffer[i] = settings.placeholder; |
||||
} |
||||
} |
||||
} |
||||
|
||||
function writeBuffer() { input.val(buffer.join('')); } |
||||
|
||||
function checkVal(allow) { |
||||
//try to place characters where they belong
|
||||
var test = input.val(), |
||||
lastMatch = -1, |
||||
i, |
||||
c; |
||||
|
||||
for (i = 0, pos = 0; i < len; i++) { |
||||
if (tests[i]) { |
||||
buffer[i] = settings.placeholder; |
||||
while (pos++ < test.length) { |
||||
c = test.charAt(pos - 1); |
||||
if (tests[i].test(c)) { |
||||
buffer[i] = c; |
||||
lastMatch = i; |
||||
break; |
||||
} |
||||
} |
||||
if (pos > test.length) { |
||||
break; |
||||
} |
||||
} else if (buffer[i] === test.charAt(pos) && i !== partialPosition) { |
||||
pos++; |
||||
lastMatch = i; |
||||
} |
||||
} |
||||
if (allow) { |
||||
writeBuffer(); |
||||
} else if (lastMatch + 1 < partialPosition) { |
||||
input.val(""); |
||||
clearBuffer(0, len); |
||||
} else { |
||||
writeBuffer(); |
||||
input.val(input.val().substring(0, lastMatch + 1)); |
||||
} |
||||
return (partialPosition ? i : firstNonMaskPos); |
||||
} |
||||
|
||||
input.data($.mask.dataName,function(){ |
||||
return $.map(buffer, function(c, i) { |
||||
return tests[i]&&c!=settings.placeholder ? c : null; |
||||
}).join(''); |
||||
}); |
||||
|
||||
if (!input.attr("readonly")) |
||||
input |
||||
.one("unmask", function() { |
||||
input |
||||
.unbind(".mask") |
||||
.removeData($.mask.dataName); |
||||
}) |
||||
.bind("focus.mask", function() { |
||||
clearTimeout(caretTimeoutId); |
||||
var pos, |
||||
moveCaret; |
||||
|
||||
focusText = input.val(); |
||||
pos = checkVal(); |
||||
|
||||
caretTimeoutId = setTimeout(function(){ |
||||
writeBuffer(); |
||||
if (pos == mask.length) { |
||||
input.caret(0, pos); |
||||
} else { |
||||
input.caret(pos); |
||||
} |
||||
}, 10); |
||||
}) |
||||
.bind("blur.mask", function() { |
||||
checkVal(); |
||||
if (input.val() != focusText) |
||||
input.change(); |
||||
}) |
||||
.bind("keydown.mask", keydownEvent) |
||||
.bind("keypress.mask", keypressEvent) |
||||
.bind(pasteEventName, function() { |
||||
setTimeout(function() {
|
||||
var pos=checkVal(true); |
||||
input.caret(pos);
|
||||
if (settings.completed && pos == input.val().length) |
||||
settings.completed.call(input); |
||||
}, 0); |
||||
}); |
||||
checkVal(); //Perform initial check for existing values
|
||||
}); |
||||
} |
||||
}); |
||||
|
||||
|
||||
})(jQuery); |
||||
@ -0,0 +1,64 @@
|
||||
<?php |
||||
/** |
||||
* @link http://www.yiiframework.com/ |
||||
* @copyright Copyright (c) 2008 Yii Software LLC |
||||
* @license http://www.yiiframework.com/license/ |
||||
*/ |
||||
|
||||
namespace yii\widgets; |
||||
|
||||
use Yii; |
||||
use yii\base\Widget; |
||||
use yii\base\Model; |
||||
use yii\base\InvalidConfigException; |
||||
|
||||
/** |
||||
* InputWidget is the base class for widgets that collect user inputs. |
||||
* |
||||
* An input widget can be associated with a data model and an attribute, |
||||
* or a name and a value. If the former, the name and the value will |
||||
* be generated automatically. |
||||
* |
||||
* @author Qiang Xue <qiang.xue@gmail.com> |
||||
* @since 2.0 |
||||
*/ |
||||
class InputWidget extends Widget |
||||
{ |
||||
/** |
||||
* @var Model the data model that this widget is associated with. |
||||
*/ |
||||
public $model; |
||||
/** |
||||
* @var string the model attribute that this widget is associated with. |
||||
*/ |
||||
public $attribute; |
||||
/** |
||||
* @var string the input name. This must be set if [[model]] and [[attribute]] are not set. |
||||
*/ |
||||
public $name; |
||||
/** |
||||
* @var string the input value. |
||||
*/ |
||||
public $value; |
||||
|
||||
|
||||
/** |
||||
* Initializes the widget. |
||||
* If you override this method, make sure you call the parent implementation first. |
||||
*/ |
||||
public function init() |
||||
{ |
||||
if (!$this->hasModel() && $this->name === null) { |
||||
throw new InvalidConfigException("Either 'name' or 'model' and 'attribute' properties must be specified."); |
||||
} |
||||
parent::init(); |
||||
} |
||||
|
||||
/** |
||||
* @return boolean whether this widget is associated with a data model. |
||||
*/ |
||||
protected function hasModel() |
||||
{ |
||||
return $this->model instanceof Model && $this->attribute !== null; |
||||
} |
||||
} |
||||
@ -0,0 +1,136 @@
|
||||
<?php |
||||
/** |
||||
* @link http://www.yiiframework.com/ |
||||
* @copyright Copyright (c) 2008 Yii Software LLC |
||||
* @license http://www.yiiframework.com/license/ |
||||
*/ |
||||
|
||||
namespace yii\widgets; |
||||
|
||||
use yii\base\InvalidConfigException; |
||||
use yii\helpers\Html; |
||||
use yii\helpers\Json; |
||||
use yii\web\JsExpression; |
||||
|
||||
/** |
||||
* MaskedInput generates a masked text input. |
||||
* |
||||
* MaskedInput is similar to [[Html::textInput()]] except that |
||||
* an input mask will be used to force users to enter properly formatted data, |
||||
* such as phone numbers, social security numbers. |
||||
* |
||||
* To use MaskedInput, you must set the [[mask]] property. The following example |
||||
* shows how to use MaskedInput to collect phone numbers: |
||||
* |
||||
* ~~~ |
||||
* echo MaskedInput::widget(array( |
||||
* 'name' => 'phone', |
||||
* 'mask' => '999-999-9999', |
||||
* )); |
||||
* ~~~ |
||||
* |
||||
* The masked text field is implemented based on the [jQuery masked input plugin](http://digitalbush.com/projects/masked-input-plugin). |
||||
* |
||||
* @author Qiang Xue <qiang.xue@gmail.com> |
||||
* @since 2.0 |
||||
*/ |
||||
class MaskedInput extends InputWidget |
||||
{ |
||||
/** |
||||
* @var string the input mask (e.g. '99/99/9999' for date input). The following characters are predefined: |
||||
* |
||||
* - `a`: represents an alpha character (A-Z,a-z) |
||||
* - `9`: represents a numeric character (0-9) |
||||
* - `*`: represents an alphanumeric character (A-Z,a-z,0-9) |
||||
* - `?`: anything listed after '?' within the mask is considered optional user input |
||||
* |
||||
* Additional characters can be defined by specifying the [[charMap]] property. |
||||
*/ |
||||
public $mask; |
||||
/** |
||||
* @var array the mapping between mask characters and the corresponding patterns. |
||||
* For example, `array('~' => '[+-]')` specifies that the '~' character expects '+' or '-' input. |
||||
* Defaults to null, meaning using the map as described in [[mask]]. |
||||
*/ |
||||
public $charMap; |
||||
/** |
||||
* @var string the character prompting for user input. Defaults to underscore '_'. |
||||
*/ |
||||
public $placeholder; |
||||
/** |
||||
* @var string a JavaScript function callback that will be invoked when user finishes the input. |
||||
*/ |
||||
public $completed; |
||||
/** |
||||
* @var array the HTML attributes for the input tag. |
||||
*/ |
||||
public $options = array(); |
||||
|
||||
|
||||
/** |
||||
* Initializes the widget. |
||||
* @throws InvalidConfigException if the "mask" property is not set. |
||||
*/ |
||||
public function init() |
||||
{ |
||||
parent::init(); |
||||
if (empty($this->mask)) { |
||||
throw new InvalidConfigException('The "mask" property must be set.'); |
||||
} |
||||
|
||||
if (!isset($this->options['id'])) { |
||||
$this->options['id'] = $this->hasModel() ? Html::getInputId($this->model, $this->attribute) : $this->getId(); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Runs the widget. |
||||
*/ |
||||
public function run() |
||||
{ |
||||
if ($this->hasModel()) { |
||||
echo Html::activeTextInput($this->model, $this->attribute, $this->options); |
||||
} else { |
||||
echo Html::textInput($this->name, $this->value, $this->options); |
||||
} |
||||
$this->registerClientScript(); |
||||
} |
||||
|
||||
/** |
||||
* Registers the needed JavaScript. |
||||
*/ |
||||
public function registerClientScript() |
||||
{ |
||||
$options = $this->getClientOptions(); |
||||
$options = empty($options) ? '' : ',' . Json::encode($options); |
||||
$js = ''; |
||||
if (is_array($this->charMap) && !empty($this->charMap)) { |
||||
$js .= 'jQuery.mask.definitions=' . Json::encode($this->charMap) . ";\n"; |
||||
} |
||||
$id = $this->options['id']; |
||||
$js .= "jQuery(\"#{$id}\").mask(\"{$this->mask}\"{$options});"; |
||||
$this->getView()->registerAssetBundle('yii/maskedinput'); |
||||
$this->getView()->registerJs($js); |
||||
} |
||||
|
||||
/** |
||||
* @return array the options for the text field |
||||
*/ |
||||
protected function getClientOptions() |
||||
{ |
||||
$options = array(); |
||||
if ($this->placeholder !== null) { |
||||
$options['placeholder'] = $this->placeholder; |
||||
} |
||||
|
||||
if ($this->completed !== null) { |
||||
if ($this->completed instanceof JsExpression) { |
||||
$options['completed'] = $this->completed; |
||||
} else { |
||||
$options['completed'] = new JsExpression($this->completed); |
||||
} |
||||
} |
||||
|
||||
return $options; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue