constrained fields (maxlength and regex pattern support)

Pages/AccountPage.razor

@@ -31,17 +31,17 @@
         <div class="row no-gutters w-100">
             <div class="col-6" style="padding-right:0.5em">
                 <MatStringField Class="w-100" Label="@I18n["Firstname"]" Outlined="true" type="text" @bind-Value="@Account.Firstname" Required="true"
-                                OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
+                                OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync" maxlength="50"></MatStringField>
             </div>
             <div class="col-6" style="padding-left:0.5em">
                 <MatStringField Class="w-100" Label="@I18n["Lastname"]" Outlined="true" type="text" @bind-Value="@Account.Lastname" Required="true"
-                                OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
+                                OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync" maxlength="50"></MatStringField>
             </div>
         </div>
         <div class="row no-gutters align-items-center w-100">
             <div class="col-12">
                 <MatStringField Class="w-100" Label="@I18n["Address"]" Outlined="true" type="text" @bind-Value="@Account.Address"
-                                OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
+                                OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync" maxlength="50"></MatStringField>
             </div>
         </div>
         <div class="row no-gutters align-items-center w-100">
@@ -60,20 +60,20 @@
         </div>
         <div class="row no-gutters align-items-center w-100">
             <div class="col-12">
-                <MatStringField Class="w-100" Label="@I18n["Phone"]" Outlined="true" type="text" @bind-Value="@Account.Phone" Required="true"
-                                OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
+                <MatTextField Class="w-100" Label="@I18n["Phone"]" Outlined="true" type="text" @bind-Value="@Account.Phone" Required="true"
+                 OnKeyDown="@InputCursorHandler.OnConstrainedFieldKeyDownHandlerAsync" maxlength="20" pattern="^([0-9]*)$"></MatTextField>
             </div>
         </div>
         <div class="row no-gutters align-items-center w-100">
             <div class="col-12">
-                <MatStringField Class="w-100" Label="@I18n["Mobile"]" Outlined="true" type="text" @bind-Value="@Account.Mobile"
-                                OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
+                <MatTextField Class="w-100" Label="@I18n["Mobile"]" Outlined="true" type="text" @bind-Value="@Account.Mobile"
+                 OnKeyDown="@InputCursorHandler.OnConstrainedFieldKeyDownHandlerAsync" maxlength="20" pattern="^([0-9]*)$"></MatTextField>
             </div>
         </div>
         <div class="row no-gutters align-items-center w-100">
             <div class="col-12">
-                <MatStringField Class="w-100" Label="@I18n["Mail"]" Outlined="true" type="text" @bind-Value="@Account.Email"
-                                OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
+                <MatStringField Class="w-100" Label="@I18n["Mail"]" Outlined="true" type="email" @bind-Value="@Account.Email"
+                 OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync" maxlength="50"></MatStringField>
             </div>
         </div>
     </div>

Shared/Services/InputCursorHandler.cs

@@ -11,12 +11,22 @@ namespace cwebplusApp.Shared.Services {
             this.jsRuntime = _jsRuntime;
         }
 
-        public async Task OnKeyDownHandlerAsync(KeyboardEventArgs e) {
+        public async Task<bool> OnKeyDownHandlerAsync(KeyboardEventArgs e) {
             var reference = DotNetObjectReference.Create(this);
             if (e.Key.Equals("Enter") || e.Key.Equals("ArrowRight")) {
                 await jsRuntime.InvokeVoidAsync("MoveCursorToNextInput", reference, e.Key);
+                return true;
             } else if (e.Key.Equals("ArrowLeft")) {
                 await jsRuntime.InvokeVoidAsync("MoveCursorToPreviousInput", reference);
+                return true;
+            }
+            return false;
+        }
+
+        public async Task OnConstrainedFieldKeyDownHandlerAsync(KeyboardEventArgs e) {
+            if (!await OnKeyDownHandlerAsync(e)) {
+                var reference = DotNetObjectReference.Create(this);
+                await jsRuntime.InvokeVoidAsync("CheckConstrainedInput", reference, e.Key);
             }
         }
     }

wwwroot/index.html

@@ -194,6 +194,17 @@
                 return element.selectionStart == null || element.selectionStart == 0;
             }
         }
+
+        function CheckConstrainedInput(dotNetObjRef, key) {
+            const ignoredKeys = ["Backspace", "Tab"];
+            var theEvent = window.event;
+            var activeElement = document.activeElement;
+            var regex = new RegExp(activeElement.pattern);
+            if (!ignoredKeys.includes(key) && !regex.test(activeElement.value +  key)) {
+                theEvent.returnValue = false;
+                if (theEvent.preventDefault) theEvent.preventDefault();
+            }
+        }
     </script>
 
     <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"