Implemented MaskedInput widget.

framework/yii/assets.php

@@ -48,4 +48,11 @@ return array(
 			YII_DEBUG ? 'punycode/punycode.js' : 'punycode/punycode.min.js',
 		),
 	),
+	'yii/maskedinput' => array(
+		'sourcePath' => __DIR__ . '/assets',
+		'js' => array(
+			'jquery.maskedinput.js',
+		),
+		'depends' => array('yii/jquery'),
+	),
 );

framework/yii/assets/jquery.maskedinput.js

+/*
+	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);
\ No newline at end of file

framework/yii/widgets/ActiveForm.php

@@ -134,8 +134,8 @@ class ActiveForm extends Widget
 			$id = $this->options['id'];
 			$options = Json::encode($this->getClientOptions());
 			$attributes = Json::encode($this->attributes);
-			$this->view->registerAssetBundle('yii/form');
-			$this->view->registerJs("jQuery('#$id').yiiActiveForm($attributes, $options);");
+			$this->getView()->registerAssetBundle('yii/form');
+			$this->getView()->registerJs("jQuery('#$id').yiiActiveForm($attributes, $options);");
 		}
 		echo Html::endForm();
 	}

framework/yii/widgets/InputWidget.php

+<?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;
+	}
+}

framework/yii/widgets/MaskedInput.php

+<?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;
+	}
+}