feat(TextArea): support OnEnteryAsync/OnEscAsync parameter (#5357)

* feat: add javascript invoke function * doc: 增加示例文档
dotnetcore · Feb 13, 2025 · 56e3600 · 56e3600
1 parent 07a3944
commit 56e3600
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 4 deletions.
diff --git a/src/BootstrapBlazor.Server/Components/Samples/TextAreas.razor b/src/BootstrapBlazor.Server/Components/Samples/TextAreas.razor
@@ -65,4 +65,12 @@
               @bind-Value="@KeyText"></Textarea>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["TextAreaKeyEventTitle"]"
+           Introduction="@Localizer["TextAreaKeyEventIntro"]"
+           Name="KeyEvent">
+    <Textarea rows="4" OnEnterAsync="OnEnterAsync" OnEscAsync="OnEscAsync"
+              PlaceHolder="@Localizer["TextAreaKeyEventPlaceHolder"]"></Textarea>
+    <ConsoleLogger @ref="ConsoleLogger"></ConsoleLogger>
+</DemoBlock>
+
 <AttributeTable Items="@GetAttributes()" />
diff --git a/src/BootstrapBlazor.Server/Components/Samples/TextAreas.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/TextAreas.razor.cs
@@ -90,6 +90,21 @@ private void MockChat()
         }
     }
 
+    [NotNull]
+    private ConsoleLogger? ConsoleLogger { get; set; }
+
+    private Task OnEnterAsync(string val)
+    {
+        ConsoleLogger.Log($"Trigger Enter Key Event");
+        return Task.CompletedTask;
+    }
+
+    private Task OnEscAsync(string val)
+    {
+        ConsoleLogger.Log($"Trigger Esc Key Event");
+        return Task.CompletedTask;
+    }
+
     /// <summary>
     /// Dispose
     /// </summary>

diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -3265,7 +3265,7 @@
     "TextAreaBindWayBindValue": "The binding value",
     "TextAreaReadOnlyTitle": "Readonly",
     "TextAreaReadOnlyIntro": "When you set the <code>readonly</code> property, the component prohibits input",
-    "TextAreaHeightTitle": "height",
+    "TextAreaHeightTitle": "Height",
     "TextAreaHeightIntro": "When you set the <code>rows</code> property, component initialization displays a fixed row height",
     "TextAreaBindWayTitle": "Two-way binding",
     "TextAreaBindWayIntro": "Binding variables within a component, data is automatically synchronized",
@@ -3284,7 +3284,10 @@
     "TextAreaUseShiftEnterTitle": "Shift Enter",
     "TextAreaUseShiftEnterIntro": "By setting <code>UseShiftEnter=\"true\"</code> you can start using <kbd>Shift</kbd> + <kbd>Enter</kbd> for line breaks, which is suitable for dialog applications.",
     "TextAreaUseShiftEnterPlaceHolder": "Please enter some text, Enter sends Shift + Enter line break",
-    "TextAreaUseShiftEnter": "Whether to use Shift + Enter instead of the original Enter key behavior"
+    "TextAreaUseShiftEnter": "Whether to use Shift + Enter instead of the original Enter key behavior",
+    "TextAreaKeyEventTitle": "Enter/Esc KeyEvent",
+    "TextAreaKeyEventIntro": "Start the <kbd>Enter</kbd> <kbd>Esc</kbd> key callback event by setting <code>OnEnterAsync</code> <code>OnEscAsync</code>",
+    "TextAreaKeyEventPlaceHolder": "Press Enter/Esc key to trigger the event"
   },
   "BootstrapBlazor.Server.Components.Samples.Toggles": {
     "TogglesOnText": "On",

diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -3284,7 +3284,10 @@
     "TextAreaUseShiftEnterTitle": "Shift Enter",
     "TextAreaUseShiftEnterIntro": "通过设置 <code>UseShiftEnter=\"true\"</code> 开始使用 <kbd>Shift</kbd> + <kbd>Enter</kbd> 进行换行操作，适用于对话框类应用",
     "TextAreaUseShiftEnterPlaceHolder": "请输入一些文字，Enter 发送 Shift + Enter 换行",
-    "TextAreaUseShiftEnter": "是否使用 Shift + Enter 代替原回车按键行为"
+    "TextAreaUseShiftEnter": "是否使用 Shift + Enter 代替原回车按键行为",
+    "TextAreaKeyEventTitle": "Enter/Esc 按键事件",
+    "TextAreaKeyEventIntro": "通过设置 <code>OnEnterAsync</code> <code>OnEscAsync</code> 开始 <kbd>Enter</kbd> <kbd>Esc</kbd> 按键回调事件",
+    "TextAreaKeyEventPlaceHolder": "按下 Enter/Esc 键触发事件"
   },
   "BootstrapBlazor.Server.Components.Samples.Toggles": {
     "TogglesOnText": "开启",

diff --git a/src/BootstrapBlazor/Components/Textarea/Textarea.razor b/src/BootstrapBlazor/Components/Textarea/Textarea.razor
@@ -1,6 +1,6 @@
 @namespace BootstrapBlazor.Components
 @inherits BootstrapInputEventBase<string>
-@attribute [BootstrapModuleAutoLoader]
+@attribute [BootstrapModuleAutoLoader(JSObjectReference = true)]
 
 @if (IsShowLabel)
 {