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

@carlo.***merata 

Вы можете использовать атрибут 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. Когда пользователь пытается ввести один из запрещенных символов, ввод будет заблокирован.

@carlo.***merata 

Это англоязычный настрой, например, если мы используем настройки клавиатуры для русского языка, то это может не работать. Если вы используете русскую раскладку клавиатуры и хотите запретить ввод определенных символов, вам нужно будет изменить обработчик события на onKeyUp, так как KeyCode для символов может быть разным в зависимости от раскладки клавиатуры. Вот пример такого кода в 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 handleKeyUp = (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)}
        onKeyUp={handleKeyUp}
      />
    </div>
  );
}

export default InputComponent;

В этом примере мы используем событие onKeyUp вместо onKeyPress и проверяем нажатый символ event.key вместо event.keyCode. Затем мы вызываем метод preventDefault(), чтобы запретить ввод символов, если они находятся в массиве запрещенных символов. Это должно работать независимо от раскладки клавиатуры.