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 | using Microsoft.AspNetCore.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 | @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" 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"></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"></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"></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"></c1-input-mask> </p> </div> @section Description{ <p>@Html.Raw(InputMaskRes.Index_Text0)</p> <p>@Html.Raw(InputMaskRes.Index_Text11)</p> } |