From e8ebd20a5c1b6597bb38c4b213c52a90d8da6396 Mon Sep 17 00:00:00 2001 From: Alex Chow Date: Fri, 25 Mar 2022 14:45:25 +0100 Subject: [PATCH 1/4] !2580 (#I4ZN9E) Add IsSelectAllTextOnEnter and SelectAllTextAsync , and Unit test MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 提供 Enter 键按下后自动选择输入框内所有字符串的设置 提供 SelectAllText() 全选文字方法 Unit test 添加 --- src/BootstrapBlazor.Shared/Locales/en.json | 6 ++++- src/BootstrapBlazor.Shared/Locales/zh.json | 7 +++++- .../Samples/Inputs.razor | 22 +++++++++++++++++-- .../Samples/Inputs.razor.cs | 8 +++++++ .../Components/Input/BootstrapInput.js | 11 ++++++++++ .../Components/Input/BootstrapInputBase.cs | 16 ++++++++++++++ test/UnitTest/Components/InputTest.cs | 9 ++++++++ 7 files changed, 75 insertions(+), 4 deletions(-) diff --git a/src/BootstrapBlazor.Shared/Locales/en.json b/src/BootstrapBlazor.Shared/Locales/en.json index 57c3e3a64..72bdcd54a 100644 --- a/src/BootstrapBlazor.Shared/Locales/en.json +++ b/src/BootstrapBlazor.Shared/Locales/en.json @@ -1239,7 +1239,11 @@ "Att10": "Whether to disable Fasle by default", "Att11": "Whether to get the focus automatically Default is fasle", "IsSelectAllTextOnFocus": "Whether auto select the all text after focus", - "ValidateRules": "Customer validation collection" + "IsSelectAllTextOnEnter": "Whether auto select the all text after presses enter", + "SelectAllTextAsync": "Select the all text method", + "ValidateRules": "Customer validation collection", + "P8": "Use IsSelectAllTextOnEnter The user presses enter to select the all text", + "P9": "Execute @ref.SelectAllTextAsync() method select the all text" }, "BootstrapBlazor.Shared.Samples.InputNumbers": { "Title": "InputNumber", diff --git a/src/BootstrapBlazor.Shared/Locales/zh.json b/src/BootstrapBlazor.Shared/Locales/zh.json index 1b0e86853..2ee928b8d 100644 --- a/src/BootstrapBlazor.Shared/Locales/zh.json +++ b/src/BootstrapBlazor.Shared/Locales/zh.json @@ -1241,7 +1241,12 @@ "Att10": "是否禁用", "Att11": "是否自动获取焦点", "IsSelectAllTextOnFocus": "获得焦点后自动选择输入框内所有字符串", - "ValidateRules": "自定义验证集合" + "IsSelectAllTextOnEnter": "Enter 键自动选择输入框内所有字符串", + "SelectAllTextAsync": "选择输入框内所有字符串方法", + "ValidateRules": "自定义验证集合", + "P8": "可通过设置 IsSelectAllTextOnEnter 用户按下 Enter 键自动选择输入框内所有字符串 ", + "P9": "执行 @ref.SelectAllTextAsync() 选择输入框内所有字符串" + }, "BootstrapBlazor.Shared.Samples.InputNumbers": { "Title": "InputNumber 组件", diff --git a/src/BootstrapBlazor.Shared/Samples/Inputs.razor b/src/BootstrapBlazor.Shared/Samples/Inputs.razor index 0bffc95ce..7f4c29914 100644 --- a/src/BootstrapBlazor.Shared/Samples/Inputs.razor +++ b/src/BootstrapBlazor.Shared/Samples/Inputs.razor @@ -15,7 +15,16 @@ - +
+
+ @Localizer["Span1"] +
+
+ +
+
+ +
@@ -52,8 +61,17 @@
@((MarkupString)Localizer["Div1"].Value)
+

@((MarkupString)Localizer["P9"].Value)

+
+
+ @Localizer["Span1"] +
+
+ +
+
-
+
diff --git a/src/BootstrapBlazor.Shared/Samples/Inputs.razor.cs b/src/BootstrapBlazor.Shared/Samples/Inputs.razor.cs index 8c35cdd68..982fa0a30 100644 --- a/src/BootstrapBlazor.Shared/Samples/Inputs.razor.cs +++ b/src/BootstrapBlazor.Shared/Samples/Inputs.razor.cs @@ -27,6 +27,8 @@ public partial class Inputs [NotNull] private BlockLogger? Trace { get; set; } + BootstrapInput? input1; + /// /// /// @@ -49,6 +51,12 @@ public partial class Inputs Trace.Log($"Esc {Localizer["Log"]}: {val}"); return Task.CompletedTask; } + + private async Task OnEnterSelectAllAsync(string val) + { + Trace.Log($"Enter call SelectAllText {Localizer["Log"]}: {val}"); + await input1!.SelectAllTextAsync(); + } private IEnumerable GetAttributes() => new[] { diff --git a/src/BootstrapBlazor/Components/Input/BootstrapInput.js b/src/BootstrapBlazor/Components/Input/BootstrapInput.js index e0ec1de2e..7c46c8ad5 100644 --- a/src/BootstrapBlazor/Components/Input/BootstrapInput.js +++ b/src/BootstrapBlazor/Components/Input/BootstrapInput.js @@ -16,6 +16,17 @@ $el.on('focus', function () { $(this).select(); }); + }, + bb_input_selectAll_onenter: function (el) { + var $el = $(el); + $el.on('keyup', function (e) { + if (e.key === 'Enter') { + $(this).select(); + } + }); + }, + bb_input_selectAll_: function (el) { + $(el).select(); } }); })(jQuery); diff --git a/src/BootstrapBlazor/Components/Input/BootstrapInputBase.cs b/src/BootstrapBlazor/Components/Input/BootstrapInputBase.cs index 93230d2e3..e8ae6b911 100644 --- a/src/BootstrapBlazor/Components/Input/BootstrapInputBase.cs +++ b/src/BootstrapBlazor/Components/Input/BootstrapInputBase.cs @@ -73,6 +73,12 @@ public abstract class BootstrapInputBase : ValidateBase [Parameter] public bool IsSelectAllTextOnFocus { get; set; } + /// + /// 获得/设置 Enter 键自动选择输入框内所有字符串 默认 false 未启用 + /// + [Parameter] + public bool IsSelectAllTextOnEnter { get; set; } + /// /// 获得/设置 是否自动修剪空白 默认 false 未启用 /// @@ -93,6 +99,12 @@ public abstract class BootstrapInputBase : ValidateBase /// public ValueTask FocusAsync() => FocusElement.FocusAsync(); + /// + /// 全选文字 + /// + /// + public async ValueTask SelectAllTextAsync()=>await JSRuntime.InvokeVoidAsync(FocusElement, "bb_input_selectAll_"); + private JSInterop>? Interop { get; set; } /// @@ -137,6 +149,10 @@ public abstract class BootstrapInputBase : ValidateBase { await JSRuntime.InvokeVoidAsync(FocusElement, "bb_input_selectAll"); } + if (IsSelectAllTextOnEnter) + { + await JSRuntime.InvokeVoidAsync(FocusElement, "bb_input_selectAll_onenter"); + } if (IsAutoFocus) { if (Modal != null) diff --git a/test/UnitTest/Components/InputTest.cs b/test/UnitTest/Components/InputTest.cs index a9b9206ed..c7dd99332 100644 --- a/test/UnitTest/Components/InputTest.cs +++ b/test/UnitTest/Components/InputTest.cs @@ -154,6 +154,15 @@ public class InputTest : BootstrapBlazorTestBase }); } + [Fact] + public void IsSelectAllTextOnEnter_Ok() + { + var cut = Context.RenderComponent>(builder => + { + builder.Add(a => a.IsSelectAllTextOnEnter, true); + }); + } + [Fact] public void FloatingLabel_Ok() { -- Gitee From 18e0287de95659e725a3e3fa9383b9863e81964e Mon Sep 17 00:00:00 2001 From: Alex Chow Date: Fri, 25 Mar 2022 15:45:36 +0100 Subject: [PATCH 2/4] Update InputTest.cs --- test/UnitTest/Components/InputTest.cs | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/test/UnitTest/Components/InputTest.cs b/test/UnitTest/Components/InputTest.cs index c7dd99332..9e8863031 100644 --- a/test/UnitTest/Components/InputTest.cs +++ b/test/UnitTest/Components/InputTest.cs @@ -155,12 +155,14 @@ public class InputTest : BootstrapBlazorTestBase } [Fact] - public void IsSelectAllTextOnEnter_Ok() + public async Task IsSelectAllTextOnEnter_Ok() { var cut = Context.RenderComponent>(builder => { builder.Add(a => a.IsSelectAllTextOnEnter, true); }); + await cut.Instance.SelectAllTextAsync(); + await cut.InvokeAsync(async () => await cut.Instance.SelectAllTextAsync()); } [Fact] -- Gitee From c3aab9f3bd48bb1f416a830771ed98fbbe0cc3bb Mon Sep 17 00:00:00 2001 From: Argo-Tianyi Date: Fri, 25 Mar 2022 22:52:45 +0800 Subject: [PATCH 3/4] =?UTF-8?q?refactor:=20=E9=87=8D=E5=91=BD=E5=90=8D=20j?= =?UTF-8?q?s=20=E8=84=9A=E6=9C=AC=E5=90=8D=E7=A7=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Components/Input/BootstrapInput.js | 6 +++--- src/BootstrapBlazor/Components/Input/BootstrapInputBase.cs | 6 +++--- .../wwwroot/js/bootstrap.blazor.bundle.min.js | 2 +- src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.min.js | 2 +- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/BootstrapBlazor/Components/Input/BootstrapInput.js b/src/BootstrapBlazor/Components/Input/BootstrapInput.js index 7c46c8ad5..5e057fd29 100644 --- a/src/BootstrapBlazor/Components/Input/BootstrapInput.js +++ b/src/BootstrapBlazor/Components/Input/BootstrapInput.js @@ -11,13 +11,13 @@ } }); }, - bb_input_selectAll: function (el) { + bb_input_selectAll_focus: function (el) { var $el = $(el); $el.on('focus', function () { $(this).select(); }); }, - bb_input_selectAll_onenter: function (el) { + bb_input_selectAll_enter: function (el) { var $el = $(el); $el.on('keyup', function (e) { if (e.key === 'Enter') { @@ -25,7 +25,7 @@ } }); }, - bb_input_selectAll_: function (el) { + bb_input_selectAll: function (el) { $(el).select(); } }); diff --git a/src/BootstrapBlazor/Components/Input/BootstrapInputBase.cs b/src/BootstrapBlazor/Components/Input/BootstrapInputBase.cs index e8ae6b911..a962b0882 100644 --- a/src/BootstrapBlazor/Components/Input/BootstrapInputBase.cs +++ b/src/BootstrapBlazor/Components/Input/BootstrapInputBase.cs @@ -103,7 +103,7 @@ public abstract class BootstrapInputBase : ValidateBase /// 全选文字 /// /// - public async ValueTask SelectAllTextAsync()=>await JSRuntime.InvokeVoidAsync(FocusElement, "bb_input_selectAll_"); + public async ValueTask SelectAllTextAsync() => await JSRuntime.InvokeVoidAsync(FocusElement, "bb_input_selectAll"); private JSInterop>? Interop { get; set; } @@ -147,11 +147,11 @@ public abstract class BootstrapInputBase : ValidateBase } if (IsSelectAllTextOnFocus) { - await JSRuntime.InvokeVoidAsync(FocusElement, "bb_input_selectAll"); + await JSRuntime.InvokeVoidAsync(FocusElement, "bb_input_selectAll_focus"); } if (IsSelectAllTextOnEnter) { - await JSRuntime.InvokeVoidAsync(FocusElement, "bb_input_selectAll_onenter"); + await JSRuntime.InvokeVoidAsync(FocusElement, "bb_input_selectAll_enter"); } if (IsAutoFocus) { diff --git a/src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.bundle.min.js b/src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.bundle.min.js index 1d9eb6e70..2d5730179 100644 --- a/src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.bundle.min.js +++ b/src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.bundle.min.js @@ -13,4 +13,4 @@ var QRCode;!function(){function a(a){this.mode=c.MODE_8BIT_BYTE,this.data=a,this /*! Summernote v0.8.18 | (c) 2013- Alan Hong and other contributors | MIT license */ !function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("jquery"));else if("function"==typeof define&&define.amd)define(["jquery"],e);else{var n="object"==typeof exports?e(require("jquery")):e(t.jQuery);for(var o in n)("object"==typeof exports?exports:t)[o]=n[o]}}(self,(function(t){return(()=>{"use strict";var e={9458:e=>{e.exports=t}},n={};function o(t){var i=n[t];if(void 0!==i)return i.exports;var r=n[t]={exports:{}};return e[t](r,r.exports,o),r.exports}o.amdO={},o.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return o.d(e,{a:e}),e},o.d=(t,e)=>{for(var n in e)o.o(e,n)&&!o.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},o.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),o.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var i={};return(()=>{o.r(i);var t=o(9458),e=o.n(t);function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(t,e){for(var n=0;n'),u=s('