$ (this) .val() не работает в FireFox, но работает в Chrome

Question

Это моя проблема. Когда я пытаюсь установить значение поля ввода в FireFox, ничего не происходит. У меня нет ошибок. Это просто не работает. Предполагается, что после номера будет добавлено два десятичных знака. Он отлично работает в Chrome. Вот мой JQuery код ...

$('input.drawer').on('blur', function() { 
 
    var number = parseFloat($(this).val()); 
 
    var n = number.toFixed(2); 
 
    $(this).val(n); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input tabindex="1" class="drawer f-right m-left w50 right-text" type="number" placeholder="$0.00" />

Я попытался с помощью $(this).attr('value' n);, но это не работает.

Answer 1

Я нашел работу, которая, похоже, работает в Firefox. Я меняю тип ввода на число в фокусе, давая мне правильную клавиатуру на мобильном телефоне, но затем меняю тип на текст на размытие, давая мне два десятичных знака. См. Код ниже ...

$('input.drawer').on('blur', function(){ 
    var number = parseFloat($(this).val()); 
    var n = number.toFixed(2); 
    $(this).attr('type','text'); 
    $(this).val(n); 
}); 

$('input.drawer').on('focus', function(){ 
    $(this).attr('type','number'); 
}); 

Answer 2

Это связано с тем, как firefox обрабатывает тип ввода номера. https://bugzilla.mozilla.org/show_bug.cgi?id=1003896

Вы можете попробовать текст, если это приемлемый тип ввода для вас.

Найдя выше цитата все ниже только интересно, но не полезно

Например, в Firefox против Chrome проверить http://jsbin.com/coyuyipeca/edit?html,js,output

Вы увидите значение действительно правильно отформатирован в боевой готовности в FF, но теряется при нажатии на числовое поле. Измените ввод на

<input tabindex="1" class="drawer f-right m-left w50 right-text" type="text" placeholder="$0.00" /> 

и вы увидите, как это работает. Конечно, вы потеряете преимущества полевого номера (особенно мобильных входов), поэтому это зависит от того, насколько важна эта функциональность для вас.

Примечание: Одна странная вещь, я отмечаю, если вы установите вход в

<input tabindex="1" class="drawer f-right m-left w50 right-text" type="number" step=".01" placeholder="$0.00" /> 

Вы можете использовать кнопку приращения и получить десятичные, только кажется, будут потеряны, когда JQuery устанавливает значение. Не уверен, что это проблема с jQuery или с FF

Answer 3

Итак, он «работает», но Firefox просто форматирует число по-разному, он обрезает 0. Если вы

$(this).val(6.00); 

вы увидите, что он показывает 6.

Если вы

$(this).val(6.50); 

он покажет 6.5, но и ошибка, что это не является допустимым значением.

Что случилось с ошибкой?

Значение по умолчанию step Значение ввода - 1, что делает Firefox только считая числа действительными, которые являются кратными этому.

Если вы установили step="0.01", то Firefox считает числа с плавающей точкой действительными.

Но форматирование все еще неверны

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

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

Answer 4

Это похоже на работу для меня в следующем jsfiddle:

<input tabindex="1" class="drawer f-right m-left w50 right-text" type="number" placeholder="0.00" /> 

$('input.drawer').on('blur', function() { 
    var number = parseFloat($(this).val()); 
    var n = number.toFixed(2); 
    $(this).val(n); 
}); 

Какой ваш точный код. Единственное, что вы не можете ввести символ «$» в поле чисел. Это потерпит неудачу. Так, например: «3.4512» получает усечение до «3.45» и устанавливается правильно, но «$ 3,4512» просто очищается, когда я его пытаюсь.

https://jsfiddle.net/bz0os3kp/1/

Ваш код, кажется, работает. Однако он обрезает конечные нули в firefox.