0

当我在输入字段中按 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，并且在我调试时，在页面创建时它会真正注册。但它永远不会在按键 Enter 时触发。而且我已经尝试过欺骗这种情况，@onkeypress:preventDefault但是@onkeypress:stopPropagation当我想仅针对我的输入字段和该特定字段仅针对事件：按下 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），或者也许我已经有一个最佳实践可以在这里遵循。

任何帮助表示赞赏。

4

1 回答 1

0

问题是您尝试在<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>
于 2020-11-24T12:14:39.730 回答