Как можно разрешить пользователю вводить только дроби и целые числа (но не смешанные числа) в HTML

Question

Как указано в вопросе выше, как я могу ограничить ввод данных пользователем только дробями (смешанные числа не включены) и целыми числами. Примеры: 3/4 или -5, но не -3 4/5. Еще хочу, чтобы программа ограничивала ...

javascript html regex

-1

Bill Joe 10 Фев 2021 в 00:52

Answer 1

Вы можете использовать этот фильтр:

<form>
<input type="text" oninput="this.value = this.value.replace(/^(-?(?:\d+(?:\/\d*)?)?).*$/, '$1')" />
</form>

Пояснение:

^ - начало ввода
( - начало группы захвата
-? - ожидайте необязательного - в начале
(?: - начало группы без захвата
- \d+ - не более 1 цифр
- (?: - начало группы без захвата
  - \/\d* - кроме косой черты и необязательных цифр
- )? - конец группы без захвата, ? делает это необязательным
)? - конец группы без захвата, ? делает это необязательным
) - конец группы захвата
.* - все, что осталось
$ - конец ввода
группа захвата ссылок с заменой '$1'

2

Peter Thoeny 10 Фев 2021 в 00:43

Answer 2

Вы можете использовать регулярное выражение [-]?[0-9]*[\/]?[0-9]+, а затем использовать атрибут pattern в input:

<form>
<input type="text" name="whatever" pattern="[-]?[0-9]*[\/]?[0-9]+" oninput="this.reportValidity()" />
</form>

1

Spectric 9 Фев 2021 в 22:06

Answer 3

Я сделал это в JavaScript, проверьте, состоит ли строка только из целых чисел или в строке только дроби, если нет, замените ввод найденными дробями. Если вам нужно другое поведение, просто измените функцию inputValidator.

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

const allIntegers = /^(?:[+-]?\d+(?: |$))+$/;
const allFractions = /^(?:[+-]?\d+\/\d+(?: |$))+$/;

function inputValidator(obj) {
  const text = obj.value;
  if(!allIntegers.test(text)&&!allFractions.test(text)){
    alert("Not Ok!");
    obj.value = (text.match(/[+-]?\d+\/\d+/g)||[]).join(" ");
  } else{
    alert("Ok");
  }
}

<form>
<input id="my_form" type="text" name="My Form" onblur="inputValidator(this)" />
</form>

0

Andre Marasca 9 Фев 2021 в 23:43

Как можно разрешить пользователю вводить только дроби и целые числа (но не смешанные числа) в HTML

3 ответа

Похожие вопросы

Новые вопросы

javascript