InputNumber
InputNumber
Overview
This sample shows the basic usage of the InputNumber control.
Features
Description
This sample shows the basic usage of the InputNumber 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 InputNumberController : 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 | @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(InputNumberRes.Index_Text8)"); } function onValueChanged(input, e) { _invalidTooltip.hide(); } </script>} <div> <label>@Html.Raw(InputNumberRes.Index_Text0)</label> <c1-input-number value="0" format="n0"></c1-input-number> </div> <div> <label>@Html.Raw(InputNumberRes.Index_Text1)</label> <c1-input-number value="@Math.PI" format="n"></c1-input-number> </div> <div> <label>@Html.Raw(InputNumberRes.Index_Text2)</label> <c1-input-number value="3.5" format="c2" step="0.5" min="0" max="10"></c1-input-number> </div> <div> <label>@Html.Raw(InputNumberRes.Index_Text3)</label> <c1-input-number value="null" placeholder="@InputNumberRes.Index_EnterANumber" is-required="false"></c1-input-number> </div> <div> <label>@Html.Raw(InputNumberRes.Index_Text7)</label> <c1-input-number id="invalidInput" min="100" max="1000" value="null" placeholder="@InputNumberRes.Index_EnterANumber" is-required="false" invalid-input="onInvalidInput" value-changed="onValueChanged"></c1-input-number> </div> <div> <label>@Html.Raw(InputNumberRes.Index_Text5)</label> <c1-input-number value="null" placeholder="@InputNumberRes.Index_EnterANumber" is-required="false" format="g5" input-type="number"></c1-input-number> </div> @section Description{ <p>@Html.Raw(InputNumberRes.Index_Text4)</p> <p>@Html.Raw(InputNumberRes.Index_Text6)</p> } |