feat(IpAddress): add keydownEvent.code ['Space','ArrowLeft','ArrowRight','Backspace'] expansion operations

Author: momijijin

src/BootstrapBlazor/Components/IpAddress/IpAddress.razor.cs

@@ -36,10 +36,10 @@ protected override void OnParametersSet()
         var ipSegments = CurrentValueAsString.Split(".", System.StringSplitOptions.RemoveEmptyEntries);
         if (ipSegments.Length == 4)
         {
-            Value1 = ipSegments[0];
-            Value2 = ipSegments[1];
-            Value3 = ipSegments[2];
-            Value4 = ipSegments[3];
+            Value1 = string.IsNullOrWhiteSpace(ipSegments[0]) ? "0" : ipSegments[0];
+            Value2 = string.IsNullOrWhiteSpace(ipSegments[1]) ? "0" : ipSegments[1];
+            Value3 = string.IsNullOrWhiteSpace(ipSegments[2]) ? "0" : ipSegments[2];
+            Value4 = string.IsNullOrWhiteSpace(ipSegments[3]) ? "0" : ipSegments[3];
         }
         else
         {
@@ -110,6 +110,7 @@ private void ValueChanged4(ChangeEventArgs args)
 
     private void UpdateValue()
     {
-        CurrentValueAsString = $"{Value1}.{Value2}.{Value3}.{Value4}";
+        // 如果遇到内容中间存在空格，去掉所有空格
+        CurrentValueAsString = $"{Value1}.{Value2}.{Value3}.{Value4}".Replace(" ", "");
     }
 }

src/BootstrapBlazor/Components/IpAddress/IpAddress.razor.js

@@ -24,6 +24,7 @@ export function init(id) {
 
     el.querySelectorAll(".ipv4-cell").forEach((c, index) => {
         EventHandler.on(c, 'keydown', e => {
+            const current = selectCell(el, index)
             if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)) {
                 // numbers, backup last status
                 ip.prevValues[index] = c.value
@@ -51,11 +52,25 @@ export function init(id) {
                 c.select()
             }
             else if (e.key === 'Backspace') {
-                if (c.value.length === 0) {
+                if (c.value.length <= 1) {
                     c.value = "0"
-                    selectCell(el, index - 1)
+                    if (index === 0)
+                        e.preventDefault();
+                    const prevCell = selectCell(el, index - 1)
+                    prevCell.selectionStart = prevCell.value.length
+                    prevCell.selectionEnd = prevCell.value.length
                 }
             }
+            // 空格或右箭头（光标一定要在内容最后面）向后换一格
+            else if (current.selectionStart === current.value.length && (e.code === 'Space' || e.code === 'ArrowRight')) {
+                e.preventDefault()
+                selectCell(el, index + 1)
+            }
+            // 左箭头（光标一定要在内容最前面）向前换一格
+            else if (current.selectionStart === 0 && e.code === 'ArrowLeft') {
+                e.preventDefault()
+                selectCell(el, index - 1)
+            }
             else if (e.key === 'Delete' || e.key === 'Tab' || e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
 
             }