Блог

Главная - Вопросы по программированию - ввод:требуется:недопустимо для десятичных знаков

ввод:требуется:недопустимо для десятичных знаков

#css

Вопрос:

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

Это работает так, как я хочу, для целых чисел (0, 1, 2, 3 …) но не для десятичных знаков (0,1, 0,2, 0,3 …).

Как я могу заставить поле ввода удалить красную рамку, если поле содержит любое число?

 input {
  margin: 0 10px 20px 0;
  padding: 5px;
  font-size: 24px;
  width: 75px
}

input:required:invalid {
  border: 2px solid red;
  -moz-box-shadow: none;
} 
 <input id = "enterThing"
  type        = "number"
  class       = "form-control formBlock"
  min         = "0"
  max         = "10.5"
  required/
>
<input id = "sliderThing"
  class   = "slider"
  type    = "range"
  step    = ".1"
  value   = "0"
  min     = "0"
  max     = "10.5"
  oninput = "enterThing.value = sliderThing.value"
>

Комментарии:

1. Ваш фрагмент кода отлично работает для меня в Chrome без каких-либо изменений. После ввода номера красная рамка исчезает. Хотя вы, возможно, захотите рассмотреть возможность использования :empty классов и :focus-visible псевдоклассов также в других правилах.

Ответ №1:

Добавьте step атрибут также к номеру входного типа.

 input {
  margin: 0 10px 20px 0;
  padding: 5px;
  font-size: 24px;
  width: 75px
}

input:required:invalid {
  border: 2px solid red;
  -moz-box-shadow: none;
} 
 <input id = "enterThing"
  type        = "number"
  class       = "form-control formBlock"
  min         = "0"
  max         = "10.5"
  step        = "0.1"
  required/
>
<input id = "sliderThing"
  class   = "slider"
  type    = "range"
  step    = ".1"
  value   = "0"
  min     = "0"
  max     = "10.5"
  oninput = "enterThing.value = sliderThing.value"
>

Комментарии:

1. Шаг по умолчанию-один… И кажется, что проверка учитывает это. Это было не очевидно 😉

Метки: