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

Question

interface InputProps {
  label?: string;
  placeholder?: string;
  className?: string;
  htmlType?: string;
  autoComplete?: string;
  size?: string;
  ariaLabel?: string;
  required?: boolean;
}

const Input = forwardRef(function Input(
  props: InputProps,
  ref: React.RefObject<HTMLInputElement>
) {
  const {
    label,
    placeholder,
    className,
    htmlType,
    autoComplete,
    size,
    ariaLabel,
    required,
  } = props;
  return (
    <div className={clsx(styles.root, className)}>
      <label>
        {label && <div className={styles.label}>{label}</div>}
        <input
          type={htmlType}
          autoComplete={autoComplete}
          placeholder={placeholder}
          ref={ref}
          className={clsx(styles.input, size && styles[size])}
          aria-label={ariaLabel}
          required={required}
        />
      </label>
    </div>
  );
});

export default Input;

код для инпута

Answer 1

Первый вариант. Все символы которые хотите исключить добавьте в массив symbolsForExcept

const symbolsForExcept = ["&", "+", "="];

export default function App() {
  return (
    <div className="App">
      <input
        type="text"
        onKeyDown={e => symbolsForExcept.includes(e.key) && e.preventDefault()}
      />
    </div>
  );
}

Codesandbox

Второй вариант. Через регулярные выражения.

export default function App() {
 const [val, setVal] = useState("");
  return (
    <div className="App">
      <input
        type="text"
        value={val}
        onChange={e => setVal(e.target.value.replace(/[&+=]/g, ""))}
      />
    </div>
  );
}

Codesandbox

Похожий ответ

БЛОГ НА HUSL

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

Ответы (1 шт):