Блог

Главная - Вопросы по программированию - Событие нажатия клавиши Blazor и коды клавиш

Событие нажатия клавиши Blazor и коды клавиш

#asp.net #razor #blazor #razor-2

Вопрос:

Я создаю элемент управления в библиотеке элементов управления Razor. Я пытаюсь разрешить только несколько нажатий клавиш в текстовом поле. Они являются:

  1. Любое число, большее 0. Это должно включать десятичные дроби
  2. Буква «Н» или «н»
  3. Разрешить пользователю копировать/вставлять (control c и control v).
  4. Разрешить стрелки и клавишу tab

Я могу легко сделать это в 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) amp;amp; (e.ctrlKey === true || e.metaKey === true)) ||  // Allow: home, end, left, right, down, up  (e.keyCode gt;= 35 amp;amp; e.keyCode lt;= 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 lt; 48 || e.keyCode gt; 57)) amp;amp; (e.keyCode lt; 96 || e.keyCode gt; 105)) {  e.preventDefault();  }  }

Но как бы я сделал это в Blazor/Razor? Похоже, что KeyboardEventArgs не предоставляет код ключа. Я мог бы использовать JsInterop для вызова своей функции JS, но, опять же, KeyboardEventArgs не предоставляет код ключа JS. Как я могу либо выполнить это в Blazor, либо получить цифровой код ключа, чтобы я мог передать это в свою функцию JS?

Ответ №1:

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

 @using System.Text.RegularExpressions; lt;input @bind-value="@InputValue" @bind-value:event="oninput"/gt; lt;h4gt;@InputValue lt;/h4gt;  @code {  private string _inputVal = "";  public string InputValue {  get =gt; _inputVal;  set {   if((double.TryParse(value,out double d) amp;amp; dgt;0)//is the number like 1.23  || value.ToLower()=="n" || value=="" )//or is N,n or empty str  _inputVal = value;  }  } }

Вставка и клавиши со стрелками работают должным образом.

Комментарии:

1. Спасибо, это привело меня туда. Есть ли способ ограничить это только одним периодом? То, что я пытаюсь сделать, это позволить кому-то ввести любое число (больше 0), включая десятичные числа. Или они могут ввести букву «N» (для обозначения N/A)

2. О, теперь я понимаю. Смотрите обновленный ответ!

3. И я не понимал, что вы можете использовать @bind-value:event=»oninput» так, как вы это сделали. Это полезно и в других областях. 1

Метки: