Qiang Xue
11 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