防止服務器端 Blazor 在 EditForm 中觸發 onsubmit

Question

當我在輸入字段中按 Enter 時，我想阻止服務器端 Blazor 觸發 EditForm 的 OnSubmit 事件處理程序（由於其他一些原因我無法擺脫）。 這似乎是一項簡單的任務，我就是無法解決。 我編了一個我能想到的最小的例子：

_Index.razor：

@page "/"
@inject IJSRuntime JSRuntime;


<EditForm Model="Model" OnSubmit="HandleOnSubmit">
    <input id="testInput"/>
    <button type="submit" value="unneeded submit button"></button>
</EditForm>

@code
{
    private CModel Model { get; set; } = new CModel() { ID = "ID", Name = "Name" };

    private async Task HandleOnSubmit()
    {
        await JSRuntime.InvokeAsync<object>("alert", new object[] { "This alert shouldn't be shown!!" });
    }
}

CModel 類（盡管它與問題無關）：

public class CModel
{
    public string ID { get; set; }
    public string Name { get; set; }
}

和_Host.cshtml：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PreventSubmitOnForm</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.server.js"></script>
    <script>
        document.getElementById("testInput").addEventListener('keypress', function (event) {
            if (event.which === 13) {
                event.preventDefault();
                alert('Form submit prevented');
            }
        });
    </script>
</body>
</html>

在 _Host.cshtml 中，我注冊了一個新的keypress事件處理程序，並且在調試時，在頁面創建時它將被真正注冊。 但它永遠不會在按鍵回車時觸發。 而且我已經嘗試使用@onkeypress:preventDefault和@onkeypress:stopPropagation來欺騙這種情況，但是當我想阻止僅針對我的輸入字段的默認行為時，它們似乎沒有幫助（正如 Steve Sanderson 在他的問題評論中聲明的那樣）並且在該特定字段中僅針對該事件：按下 Enter。

在普通的 HTML + JS 情況下，它就像一個魅力： https : //jsfiddle.net/wmk608gh/1/

所以我結束了 JS Interop 解決方案並添加了腳本

<script>
    document.getElementById("testInput").addEventListener('keypress', function (event) {
        if (event.which === 13) {
            event.preventDefault();
            alert('Form submit prevented');
        }
    });
</script>

到_Host.cshtml。 但它似乎不起作用。 我想我應該將我的腳本注冊到另一個事件（而不是keypress ），或者可能已經有一個我可以在這里遵循的最佳實踐。

任何幫助表示贊賞。

Answer 1

問題是您嘗試在<input />元素尚未呈現的時候添加 EventListener 。

為了完成這項工作，您可以在 blazor 呈現您的頁面后調用您的 JS 函數：

在您的 _Index.razor @code塊中添加：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JSRuntime.InvokeVoidAsync("PreventDefault");
    }
}

在 _Host.cshtml 中用一個函數包裝你的 addEventListener ：

<script>
    function PreventDefault() {
        document.getElementById("testInput").addEventListener('keypress', function (event) {
            if (event.which === 13) {
                event.preventDefault();
                alert('Form submit prevented');
            }
        });
    }
</script>

防止服務器端 Blazor 在 EditForm 中觸發 onsubmit

問題描述

1 個解決方案

解決方案1
0 已采納 2020-11-24 12:14:39

防止服務器端 Blazor 在 EditForm 中觸發 onsubmit

問題描述

1 個解決方案

解決方案1 0 已采納 2020-11-24 12:14:39

解決方案1
0 已采納 2020-11-24 12:14:39