Как условно PreventDefault внутри компонента ввода в Blazor? - PullRequest
Новая
       36

Как условно PreventDefault внутри компонента ввода в Blazor?

1 голос
/ 22 апреля 2020

Я хочу запретить поведение ввода по умолчанию (тег html input с type="text") только при нажатии клавиши ввода 

protected void HandleKeyPress(KeyboardEventArgs keyboardEventArgs)
{
    if (keyboardEventArgs.Key == "Enter")
    {
        // prevent default
    }     

    // rest of function  
}

Я знаю, что могу делать такие вещи, как @ on {EVENT}: warnDefault но как сделать это условно в обработчике событий?

В javascript я могу сделать что-то вроде 

function(e){
    if(e.keyCode == 13) {
      e.preventDefault();
    }
    // rest of function
}

Как сделать то же самое в Blazor?

Редактировать:

Я делаю ввод для библиотеки, и я не могу изменить кнопку отправки , мне нужно предотвратить это внутри моего компонента ввода.

Ответы [ 2 ]

0 голосов
/ 28 апреля 2020

Спасибо enet и Питеру Моррису за помощь в этом.

После многих попыток, похоже, единственный способ сделать это с javascript

. js

window.preventDefaultOnEnter = function (element, remove = false) {
    var preventDefaultOnEnterFunction = function (e) {
        if (e.keyCode === 13 || e.key === "Enter") {
            e.preventDefault()
            return false
        }
    }
    if (remove) {
        element.removeEventListener('keydown', preventDefaultOnEnterFunction, false);
    }
    else {
        element.addEventListener('keydown', preventDefaultOnEnterFunction, false);
    }
}

.razor 

<input @ref="InputRef" />

@code {
    [Inject]
    private IJSRuntime JSRuntime { get; set; }

    public ElementReference InputRef { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        if (PreventDefaultOnEnter)
        {
            await JSRuntime.InvokeVoidAsync("preventDefaultOnEnter", InputRef);
        }
    }

    public override async void Dispose()
    {
        base.Dispose();
        if (PreventDefaultOnEnter)
        {
            await JSRuntime.InvokeVoidAsync("preventDefaultOnEnter", InputRef, true);
        }
    }
}
0 голосов
/ 23 апреля 2020

Короче, вы не можете (в C#).

Это происходит потому, что все JavaScript Взаимодействие выполняется асинхронно, а условное аннулирование событий всегда должно быть синхронным.

Кажется странным, что вы не хотите, чтобы пользователи вашей библиотеки могли нажать Enter, чтобы отправить свою форму, когда ваш элемент управления вводом сфокусирован.

Однако вы могли бы написать немного javascript чтобы сделать это за вас. Вы можете использовать @ref=SomeVariable в вашем html элементе управления вводом, который даст вам ссылку HtmlElementReference, которую вы можете передать в качестве параметра в javascript из метода OnAfterRender ваших компонентов, когда firstRender == true

Вы можете прочитать как это сделать здесь https://blazor-university.com/javascript-interop/calling-javascript-from-dotnet/passing-html-element-references/

...