Как при вводе в определённый input запретить ввод символов +, = и & в react.js?

Пользователь

от carlo.cummerata , в категории: JavaScript , 9 месяцев назад

Как при вводе в определённый input запретить ввод символов +, = и & в react.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от kenya , 9 месяцев назад

@carlo.cummerata 

Вы можете использовать атрибут onKeyPress для определения того, какие символы пользователь вводит в определенный input. Затем вы можете проверять каждый нажатый символ и запрещать ввод символов +, = и & путем вызова метода preventDefault() для события клавиатуры.


Вот пример кода, который показывает, как это сделать в React.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React, { useState } from "react";

function InputComponent() {
  const [value, setValue] = useState("");

  const handleKeyPress = (event) => {
    const forbiddenChars = ["+", "=", "&"];
    if (forbiddenChars.includes(event.key)) {
      event.preventDefault();
    }
  };

  return (
    <div>
      <label>Введите текст:</label>
      <input
        type="text"
        value={value}
        onChange={(event) => setValue(event.target.value)}
        onKeyPress={handleKeyPress}
      />
    </div>
  );
}

export default InputComponent;


В этом примере компонент InputComponent содержит текстовый input, который принимает ввод от пользователя. Мы определяем функцию handleKeyPress, которая будет вызываться каждый раз, когда пользователь нажимает клавишу на клавиатуре внутри input. Внутри этой функции мы определяем запрещенные символы в массиве forbiddenChars и проверяем, входит ли нажатый символ в этот массив. Если да, мы вызываем метод preventDefault() для события клавиатуры, чтобы запретить ввод этого символа.


Мы передаем функцию handleKeyPress в атрибут onKeyPress нашего input, чтобы она была вызвана каждый раз, когда пользователь нажимает клавишу внутри input. Когда пользователь пытается ввести один из запрещенных символов, ввод будет заблокирован.