InputMask
InputMask
Overview
This sample shows the basic usage of the InputMask control.
Features
Password
Phone number along with number-pad keyboard (on mobile, tablet, iPad only)
Description
This sample shows the basic usage of the InputMask control.
You can also use InputType property for more masks as well as showing appropriate soft keyboard type on mobile phone, tablet, iPad etc.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace MvcExplorer.Controllers{ public partial class InputMaskController : Controller { public ActionResult Index() { return View(); } }} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | @section Scripts{<style> .invalid-tooltip { background-color: red; color: yellow; opacity: 0.9; border-color: lightcoral; }</style><script> var _invalidTooltip; c1.documentReady(function () { _invalidTooltip = new wijmo.Tooltip(); _invalidTooltip.cssClass = 'invalid-tooltip'; _invalidTooltip.position = 11; window.addEventListener('resize', function () { if (_invalidTooltip.isVisible) { _invalidTooltip.hide(); onInvalidInput(); } }); }) function onInvalidInput(input, e) { e && (e.cancel = true); _invalidTooltip.show("#invalidInput", "@Html.Raw(Resources.InputMask.Index_Text13)"); } function onValueChanged(input, e) { _invalidTooltip && _invalidTooltip.hide(); } function valueChanged(sender) { var customMaskTrial = wijmo.Control.getControl("#imCustomTrial"); customMaskTrial.mask = sender.value; customMaskTrial.hostElement.title = 'Mask: ' + (sender.value || 'N/A'); }</script>}<div> <label> @Html.Raw(Resources.InputMask.Index_Text0) @Html.Raw(Resources.InputMask.Index_Text12) </label> @(Html.C1().InputMask() .Id("invalidInput") .Mask("000-00-0000") .HtmlAttributes(new { title = "Mask: 000-00-0000" }) .Value("012342678") .OnClientInvalidInput("onInvalidInput") .OnClientValueChanged("onValueChanged") )</div><div> <label>@Html.Raw(Resources.InputMask.Index_Text1)</label> @Html.C1().InputMask().Mask("(999) 000-0000").HtmlAttributes(new { title = "Mask: (999) 000-0000" })</div><div> <label>@Html.Raw(Resources.InputMask.Index_Text2)</label> @(Html.C1().InputMask().Id("imCustomInput") .Placeholder(Resources.InputMask.Index_Placeholder1) .OnClientValueChanged("valueChanged") ) @(Html.C1().InputMask().Id("imCustomTrial") .Placeholder(Resources.InputMask.Index_Placeholder2) )</div><div> <label>@Html.Raw(Resources.InputMask.Index_Text3)</label> @(Html.C1().InputDate().Value(DateTime.Now) .Format("d").Mask(Resources.InputMask.Mask_Input_Date) .HtmlAttributes(new { title = "Mask: "+ Resources.InputMask.Mask_Input_Date }) )</div><div> <label>@Html.Raw(Resources.InputMask.Index_Text4)</label> @(Html.C1().InputTime().Value(DateTime.Now) .Format("t").Mask("00:00 >LL") .IsEditable(true) .HtmlAttributes(new { title = "Mask: 00:00 >LL" }) )</div><div> <label>@Html.Raw(Resources.InputMask.Index_Text6)</label> <p> @Html.Raw(Resources.InputMask.Index_Text7) @(Html.C1().InputMask() .InputType("password") .Placeholder(Resources.InputMask.Index_Placeholder3) .HtmlAttributes(new { title = "InputType: password" }) ) </p> <p> @Html.Raw(Resources.InputMask.Index_Text10) @(Html.C1().InputMask() .Mask("(999) 000-0000") .InputType("tel") .HtmlAttributes(new { title = "InputType: tel, Mask: (999) 000-0000" }) ) </p> </div>@section Description{ <p>@Html.Raw(Resources.InputMask.Index_Text5)</p> <p>@Html.Raw(Resources.InputMask.Index_Text11)</p>} |