BootstrapInputNumber格式化千分位不显示的问题

BootstrapInputNumber格式化千分位不显示的问题，给组件添加一个class组件特殊标识，然后通过js回调显示，不知道这个合不合适

Author: Tony-ST0754

src/BootstrapBlazor/Components/Input/BootstrapInput.razor.js

@@ -1,4 +1,28 @@
-import EventHandler from "../../modules/event-handler.js"
+import EventHandler from "../../modules/event-handler.js"
+
+
+export function init(id, invoke, method) {
+    const el = document.getElementById(id)
+    EventHandler.on(el, 'focus', e => {
+        const isString = e.target.getAttribute('type') === 'text';
+        const isNumber = e.target.getAttribute('class').includes("input-number")
+        if (isString && isNumber) {
+            let value = e.target.value;
+            e.target.setAttribute('type', 'number');
+            e.target.value = value.split(',').join('');
+            invoke.invokeMethodAsync(method, true);
+        }
+    });
+    EventHandler.on(el, 'blur', e => {
+        const isString = e.target.getAttribute('type') === 'number';
+        const isNumber = e.target.getAttribute('class').includes("input-number")
+        if (isString && isNumber) {
+            e.target.setAttribute('type', 'text');
+            invoke.invokeMethodAsync(method, false);
+        }
+
+    });
+}
 
 export function focus(id) {
     const el = document.getElementById(id)

src/BootstrapBlazor/Components/InputNumber/BootstrapInputNumber.razor.cs

@@ -12,6 +12,7 @@ namespace BootstrapBlazor.Components;
 /// <para lang="zh">An input component for editing numeric values. Supported numeric 类型s are <see cref="int"/>, <see cref="long"/>, <see cref="short"/>, <see cref="float"/>, <see cref="double"/>, <see cref="decimal"/></para>
 /// <para lang="en">An input component for editing numeric values. Supported numeric types are <see cref="int"/>, <see cref="long"/>, <see cref="short"/>, <see cref="float"/>, <see cref="double"/>, <see cref="decimal"/></para>
 /// </summary>
+[BootstrapModuleAutoLoader("Input/BootstrapInput.razor.js", JSObjectReference = true)]
 public partial class BootstrapInputNumber<TValue>
 {
     /// <summary>
@@ -29,6 +30,7 @@ public partial class BootstrapInputNumber<TValue>
     /// </summary>
     protected string? InputClassString => CssBuilder.Default("form-control")
         .AddClass(CssClass).AddClass(ValidCss)
+        .AddClass("input-number")
         .AddClass("input-number-fix", ShowButton)
         .AddClass($"border-{Color.ToDescriptionString()}", Color != Color.None)
         .AddClassFromAttributes(AdditionalAttributes)
@@ -120,6 +122,34 @@ protected override void OnInitialized()
         {
             _lastInputValueString ??= Value?.ToString();
         }
+
+
+    }
+
+    /// <summary>
+    /// 
+    /// <inheritdoc/>
+    /// </summary>
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, nameof(TriggerFormatValue));
+
+    /// <summary>
+    /// <para lang="zh">Trigger value changed event 回调. Trigger by JavaScript</para>
+    /// <para lang="en">Trigger value changed event callback. Trigger by JavaScript</para>
+    /// </summary>
+    /// <param name="focus"></param>
+    [JSInvokable]
+    public Task TriggerFormatValue(bool focus)
+    {
+        if (focus)
+        {
+            CurrentValueAsString = InternalFormat(Value) ?? "";
+        }
+        else
+        {
+            CurrentValueAsString = GetFormatString(Value) ?? "";
+        }
+        StateHasChanged();
+        return Task.CompletedTask;
     }
 
     /// <summary>