refactor: 重构 DOM 使用 input 元素

Author: ArgoZhang

src/BootstrapBlazor/Components/Input/OtpInput.razor

@@ -4,17 +4,8 @@
 <div @attributes="AdditionalAttributes" id="@Id" class="@ClassString">
     @for (var index = 0; index < Digits; index++)
     {
-        @if(IsReadonly || IsDisabled)
-        {
-            <span class="@ItemClassString">
-                @GetValueString(index)
-            </span>
-        }
-        else
-        {
-            <input type="@TypeString" class="@InputClassString"
-                    maxlength="@MaxLengthString" inputmode="@TypeModeString" placeholder="@PlaceHolder"
-                    value="@GetValueString(index)" />
-        }
+        <input type="@TypeString" class="@InputClassString"
+                maxlength="@MaxLengthString" inputmode="@TypeModeString" placeholder="@PlaceHolder"
+                value="@GetValueString(index)" readonly="@ReadonlyString" disabled="@DisabledString" />
     }
 </div>

src/BootstrapBlazor/Components/Input/OtpInput.razor.cs

@@ -39,11 +39,6 @@ public partial class OtpInput
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
-    private string? ItemClassString => CssBuilder.Default("bb-opt-item")
-        .AddClass("disabled", IsDisabled)
-        .AddClass(ValidCss)
-        .Build();
-
     private string? InputClassString => CssBuilder.Default("bb-opt-item")
         .AddClass("input-number-fix", Type == OtpInputType.Number)
         .AddClass(ValidCss)
@@ -68,6 +63,10 @@ public partial class OtpInput
         _ => null
     };
 
+    private string? ReadonlyString => IsReadonly ? "readonly" : null;
+
+    private string? DisabledString => IsDisabled ? "disabled" : null;
+
     private char[] _values = [];
 
     /// <summary>
@@ -96,10 +95,9 @@ protected override void OnParametersSet()
 
     private char? GetValueString(int index)
     {
-        return _values[index] != 0 ? _values[index] : null;
+        return _values[index] != 0 ? _values[0] : null;
     }
 
-
     /// <summary>
     /// Trigger value changed event callback. Trigger by JavaScript.
     /// </summary>