#asp.net #razor #blazor #razor-2
Вопрос:
Я создаю элемент управления в библиотеке элементов управления Razor. Я пытаюсь разрешить только несколько нажатий клавиш в текстовом поле. Они являются:
- Любое число, большее 0. Это должно включать десятичные дроби
- Буква «Н» или «н»
- Разрешить пользователю копировать/вставлять (control c и control v).
- Разрешить стрелки и клавишу 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