InputMask
InputMask
Overview
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.
In OverwriteMode, every character you type is displayed at the cursor position.
Features
Password
Phone number along with number-pad keyboard (on mobile, tablet, iPad only)
Settings
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.
- In OverwriteMode, every character you type is displayed at the cursor position. If a character is already at that position, it is replaced.
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 | using Microsoft.AspNetCore.Mvc; using System.Collections.Generic; using MvcExplorer.Models; using Microsoft.AspNetCore.Http; namespace MvcExplorer.Controllers { public partial class InputMaskController : Controller { private readonly ControlOptions _optionModel = new ControlOptions { Options = new OptionDictionary { {"Overwrite Mode",new OptionItem{ Values = new List<string> { "True", "False"}, CurrentValue = "True"}} } }; public ActionResult Index(IFormCollection collection) { _optionModel.LoadPostData(collection); ViewBag.DemoOptions = _optionModel; 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 | @{ ControlOptions optionsModel = ViewBag.DemoOptions; ViewBag.DemoSettings = true; } @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(InputMaskRes.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> @InputMaskRes.Index_Text @Html.Raw(InputMaskRes.Index_Text12) </label> <c1-input-mask id="invalidInput" mask="000-00-0000" title="Mask: 000-00-0000" value="012342678" overwrite-mode="@Convert.ToBoolean(optionsModel.Options["Overwrite Mode"].CurrentValue)" invalid-input="onInvalidInput" value-changed="onValueChanged"></c1-input-mask> </div> <div> <label>@Html.Raw(InputMaskRes.Index_PhoneNumber)</label> <c1-input-mask mask="(999) 000-0000" title="Mask: (999) 000-0000" overwrite-mode="@Convert.ToBoolean(optionsModel.Options["Overwrite Mode"].CurrentValue)"></c1-input-mask> </div> <div> <label>@Html.Raw(InputMaskRes.Index_TryYourOwn)</label> <c1-input-mask id="imCustomInput" placeholder="@InputMaskRes.Index_EnterAnInputMask" value-changed="valueChanged"></c1-input-mask> <c1-input-mask id="imCustomTrial" placeholder="@InputMaskRes.Index_TryYourInputMask" overwrite-mode="@Convert.ToBoolean(optionsModel.Options["Overwrite Mode"].CurrentValue)"></c1-input-mask> </div> <div> <label>@Html.Raw(InputMaskRes.Index_InputDateWithMask)</label> <c1-input-date value="@DateTime.Now" format="d" mask="@InputMaskRes.Mask_Input_Date" title="Mask: @InputMaskRes.Mask_Input_Date"></c1-input-date> </div> <div> <label>@Html.Raw(InputMaskRes.Index_InputTimeWithMask)</label> <c1-input-time value="@DateTime.Now" format="t" mask="00:00 >LL" is-editable="true" title="Mask: 00:00 >LL"></c1-input-time> </div> <div> <label>@Html.Raw(InputMaskRes.Index_Text6)</label> <p> @Html.Raw(InputMaskRes.Index_Text7) <c1-input-mask placeholder="@InputMaskRes.Index_Placeholder3" input-type="password" title="InputType: password" overwrite-mode="@Convert.ToBoolean(optionsModel.Options["Overwrite Mode"].CurrentValue)"></c1-input-mask> </p> <p> @Html.Raw(InputMaskRes.Index_Text10) <c1-input-mask mask="(999) 000-0000" input-type="tel" title="InputType: tel, Mask: (999) 000-0000" overwrite-mode="@Convert.ToBoolean(optionsModel.Options["Overwrite Mode"].CurrentValue)"></c1-input-mask> </p> </div> @section Settings{ @await Html.PartialAsync("_OptionsMenu", optionsModel) } @section Description{ <p>@Html.Raw(InputMaskRes.Index_Text0)</p> <ul> <li>@Html.Raw(InputMaskRes.Index_Text11)</li> <li>@Html.Raw(InputMaskRes.Index_Text14)</li> </ul> } |