В чем причина такого поведения?

Question

[massef]

Почему если установить любое значение и потом попытаться стереть клавишей Backspace, то появляется число 50 и при этом не стирается первая цифра?
codepen.io/anon/pen/aBGoej

Answer 1

[Дмитрий Еремин]

1. Первая цифра стирается, получается у inputa с типом number пустое значение
2. У инпута с типом range пустого значения быть не может - выставляется значение дефолтовое

Обрабатывать можно так:

$amount.on('input', function() {
  if(this.value == "") this.value = 0; //например, вот так. Если значение пустое, ставить 0
  $rangeslider.val(this.value).change();
});

История какая: подразумевается, что пользователь берет этот круглый ползунок и двигает, куда ему надо. Ползунок занимает положение в соответствии с текущим значением. Нет значения - нет положения. Т.е. ползунок отображаться не будет. А что тогда остается двигать пользователю? Ничего.
Это еще не все. Это вы - молодец - на старте указываете значение. А если разработчик не указывает? забыл или не нужно? Можно тогда ставить автоматом. Какое? Самое левое? А почему? Самое правое? А почему? Посередине? Звучит демократично.
В общем, это - не дефект, а защита от дурака

Comments

[massef]

в обоих инпутах value установлено в 0, откуда взяться дефолтному значению в range?

[Дмитрий Еремин]

massef: ну да. Когда элемент отрисовывается, проставляется значение 0, как и написано в разметке
Потом я вписываю в нижний инпут 70. Значение у ползунка тоже 70
Стираю посимвольно:
сначала значения по 7.
потом null (не 0)
нижний инпут так и оставался бы пустым, если б не строка $amount[0].value = this.value;
а верхние инпут должен какое-то значение иметь. Берется среднее

[Михаил]

massef: такое поведение у браузера, если value пустое, то он ставит половину от максимального значения.

[Михаил]

massef: вам же ссылку привели, там всё написано =)

[massef]

Дмитрий Еремин я так понимаю это не исправить? или нужно учитывать в коде если пользователь нажимает Backspace?

[Дмитрий Еремин]

massef:
$amount.on('input', function() {
if(this.value == "") this.value = 0; //например, вот так. Если значение пустое, ставить 0
$rangeslider.val(this.value).change();
});

[massef]

Дмитрий Еремин Спасибо! Я пытался немного по другому установить ноль в поле, но не смог привязать движение ползунка, т.е. он оставался на месте. Теперь понятно.

[x67]

massef: я кстати js не знаю, но вот исправил
if (this.value !="") {
$rangeslider.val(this.value).change();
}
else
{
$rangeslider.val(0).change();
}

[Дмитрий Еремин]

massef: и еще, "исправить" - не совсем подходящее слово. Это же не ошибка.
История какая: подразумевается, что пользователь берет этот круглый ползунок и двигает, куда ему надо. Ползунок занимает положение в соответствии с текущим значением. Нет значения - нет положения. Т.е. ползунок отображаться не будет. А что тогда остается двигать пользователю? Ничего.
Это еще не все. Это вы - молодец - на старте указываете значение. А если разработчик не указывает? забыл или не нужно? Можно тогда ставить автоматом. Какое? Самое левое? А почему? Самое правое? А почему? Посередине? Звучит демократично.
В общем, это - не дефект, а защита от дурака