diff --git a/src/BootstrapBlazor.Server/Components/Samples/TextAreas.razor b/src/BootstrapBlazor.Server/Components/Samples/TextAreas.razor index bf5163b3a2d..8ffc65a3aa5 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/TextAreas.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/TextAreas.razor @@ -9,59 +9,60 @@ - - + +
@Text
- +
diff --git a/src/BootstrapBlazor.Server/Components/Samples/TextAreas.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/TextAreas.razor.cs index 66838488959..553c6b82550 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/TextAreas.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/TextAreas.razor.cs @@ -15,6 +15,8 @@ public partial class TextAreas private string? Text { get; set; } + private string? KeyText { get; set; } + private string? ChatText { get; set; } private int ScrollValue { get; set; } @@ -163,11 +165,19 @@ private AttributeItem[] GetAttributes() => }, new() { - Name = nameof(BootstrapBlazor.Components.Textarea.IsAutoScroll), + Name = nameof(Textarea.IsAutoScroll), Description = Localizer["TextAreaAutoScroll"], Type = "bool", ValueList = "true|false", DefaultValue = "false" + }, + new() + { + Name = nameof(Textarea.UseShiftEnter), + Description = Localizer["TextAreaUseShiftEnter"], + Type = "bool", + ValueList = "true|false", + DefaultValue = "false" } ]; } diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index 39c19942614..8075f8cc43c 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -3280,7 +3280,11 @@ "TextAreaScrollToBottom": "Scroll to bottom", "TextAreaScrollToTop": "Scroll to top", "TextAreaScrollTo": "Scroll +20", - "TextAreaAutoScroll": "Automatic scrolling" + "TextAreaAutoScroll": "Automatic scrolling", + "TextAreaUseShiftEnterTitle": "Shift Enter", + "TextAreaUseShiftEnterIntro": "By setting UseShiftEnter=\"true\" you can start using Shift + Enter 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" }, "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 index c0011c53a9a..a77f39725c0 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -3280,7 +3280,11 @@ "TextAreaScrollToBottom": "滚动到底部", "TextAreaScrollToTop": "滚动到顶部", "TextAreaScrollTo": "滚动+20", - "TextAreaAutoScroll": "自动滚屏" + "TextAreaAutoScroll": "自动滚屏", + "TextAreaUseShiftEnterTitle": "Shift Enter", + "TextAreaUseShiftEnterIntro": "通过设置 UseShiftEnter=\"true\" 开始使用 Shift + Enter 进行换行操作，适用于对话框类应用", + "TextAreaUseShiftEnterPlaceHolder": "请输入一些文字，Enter 发送 Shift + Enter 换行", + "TextAreaUseShiftEnter": "是否使用 Shift + Enter 代替原回车按键行为" }, "BootstrapBlazor.Server.Components.Samples.Toggles": { "TogglesOnText": "开启", diff --git a/src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.js b/src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.js index 4feca07aaa3..c544d05f5ad 100644 --- a/src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.js +++ b/src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.js @@ -1,4 +1,4 @@ -import { debounce, getHeight } from "../../modules/utility.js" +import { debounce } from "../../modules/utility.js" import { handleKeyUp, select, selectAllByFocus, selectAllByEnter } from "../Input/BootstrapInput.razor.js" import Data from "../../modules/data.js" import EventHandler from "../../modules/event-handler.js" diff --git a/src/BootstrapBlazor/Components/Textarea/Textarea.razor b/src/BootstrapBlazor/Components/Textarea/Textarea.razor index b5cf9fa4dd8..bc249f4bfe6 100644 --- a/src/BootstrapBlazor/Components/Textarea/Textarea.razor +++ b/src/BootstrapBlazor/Components/Textarea/Textarea.razor @@ -6,4 +6,6 @@ { } - + diff --git a/src/BootstrapBlazor/Components/Textarea/Textarea.razor.cs b/src/BootstrapBlazor/Components/Textarea/Textarea.razor.cs index 4f192d7547b..1b3220154e1 100644 --- a/src/BootstrapBlazor/Components/Textarea/Textarea.razor.cs +++ b/src/BootstrapBlazor/Components/Textarea/Textarea.razor.cs @@ -34,11 +34,19 @@ public partial class Textarea [Parameter] public bool IsAutoScroll { get; set; } + /// + /// 获得/设置 是否使用 Shift + Enter 代替原回车按键行为 默认为 false + /// + [Parameter] + public bool UseShiftEnter { get; set; } + /// /// 获得 客户端是否自动滚屏标识 /// private string? AutoScrollString => IsAutoScroll ? "auto" : null; + private string? _shiftEnterString => UseShiftEnter ? "true" : null; + /// /// /// diff --git a/src/BootstrapBlazor/Components/Textarea/Textarea.razor.js b/src/BootstrapBlazor/Components/Textarea/Textarea.razor.js index 3bd366567ee..89a77189a34 100644 --- a/src/BootstrapBlazor/Components/Textarea/Textarea.razor.js +++ b/src/BootstrapBlazor/Components/Textarea/Textarea.razor.js @@ -1,13 +1,24 @@ import { select, handleKeyUp, selectAllByFocus, selectAllByEnter } from "../Input/BootstrapInput.razor.js" import Data from "../../modules/data.js" +import EventHandler from "../../modules/event-handler.js" export function init(id) { + var el = document.getElementById(id); const text = { prevMethod: '', - element: document.getElementById(id) + element: el } - Data.set(id, text) + Data.set(id, text); + EventHandler.on(el, 'keydown', e => { + if (e.key === "Enter" || e.key === "NumpadEnter") { + const useShiftEnter = el.getAttribute('data-bb-shift-enter') === 'true'; + const shiftKey = e.shiftKey; + if (!shiftKey || !useShiftEnter) { + e.preventDefault(); + } + } + }); } export function execute(id, method, position) { @@ -36,7 +47,12 @@ export function execute(id, method, position) { } export function dispose(id) { - Data.remove(id) + const text = Data.get(id); + Data.remove(id); + + if (text) { + EventHandler.off(text.element); + } } export { select, handleKeyUp, selectAllByFocus, selectAllByEnter } diff --git a/test/UnitTest/Components/TextareaTest.cs b/test/UnitTest/Components/TextareaTest.cs index 63a60b918df..be55c59c167 100644 --- a/test/UnitTest/Components/TextareaTest.cs +++ b/test/UnitTest/Components/TextareaTest.cs @@ -76,4 +76,20 @@ public async Task OnBlurAsync_Ok() await cut.InvokeAsync(() => { input.Blur(); }); Assert.True(blur); } + + [Fact] + public void UseShiftEnter_Ok() + { + var cut = Context.RenderComponent