时间戳

首页 > 解决方案 > Blazor 按键事件和 KeyCodes

asp.net - Blazor 按键事件和 KeyCodes

问题描述

我正在 Razor 控件库中创建一个控件。我试图只允许在文本框中允许按下几个按键。他们是：

  1. 任何大于 0 的数字。这是包括小数
  2. 字母“N”或“n”
  3. 允许用户复制/粘贴（control+c 和 control+v）。
  4. 允许使用箭头和 Tab 键

通过使用 Keycode，我可以轻松地在 Javascript 中执行此操作。在 JS 中，我会这样做：

keyPress: function (e) {
        var datatype = e.currentTarget.getAttribute("data-type");
        settings.valueChange.call();
        //add 110, 190 for decimal          
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 ||
            // Allow: Ctrl+A,Ctrl+C,Ctrl+V, Command+A
            ((e.keyCode == 65 || e.keyCode == 86 || e.keyCode == 67) && (e.ctrlKey === true || e.metaKey === true)) ||
            // Allow: home, end, left, right, down, up
            (e.keyCode >= 35 && e.keyCode <= 40)) {
            // let it happen, don't do anything
            if (e.keyCode == 86) {
                //PASTE                
            }
            return;
        }
        if (e.keyCode === 78) {
            e.preventDefault();               
            //its an N, do some stuff
        } else if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    }

但是，我将如何在 Blazor/Razor 中执行此操作？KeyboardEventArgs 似乎没有提供 KeyCode。我可以使用 jsInterop 来调用我的 JS 函数，但是，KeyboardEventArgs 没有提供 JS KeyCode。如何在 Blazor 中完成此操作或获取数字 KeyCode，以便将其传递给我的 JS 函数？

标签： asp.netrazorblazorrazor-2

解决方案

您可以使用更多 Blazor 方式来执行此操作，并在每次更改文本时检查字符串。

@using System.Text.RegularExpressions;
<input @bind-value="@InputValue" @bind-value:event="oninput"/>
<h4>@InputValue </h4>

@code {
    private string _inputVal = "";
    public string InputValue {
        get => _inputVal;
        set { 
        if((double.TryParse(value,out double d) && d>0)//is the number like 1.23
          || value.ToLower()=="n" || value=="" )//or is N,n or empty str
            _inputVal = value;
        }
        }
}

粘贴和箭头键按预期工作。

推荐阅读