Стилизация поля для символов
Когда дело доходит до включения символов в это поле number, вы можете использовать такой обход:
HTML:
<span id="number-container">
<input type="number" name="number" id="number-field" value="500" />
<span id="number-container-symbol">$</span>
</span>
CSS:
#number-container {
position: relative;
}
#number-container-symbol {
left: 5pt;
position: absolute;
top: 0px;
}
#number-field {
background-color: transparent;
padding-left: 10pt;
}
Считайте это доказательством концепции. Смотрите этот jsfiddle для живого примера. В Chrome это выглядит так:
Определение меньшей гранулярности
На основании документации по вводу чисел (Черновик редактора) , для определить гранулярность вам необходимо добавить атрибут step="<some-floating-point-number>" в тег <input>:
<input type="number" name="number" value="500.01" step="0.01" />
и это будет работать во многих современных браузерах. См. этот jsfiddle для тестов.
Заключение
Вы должны иметь возможность стилизовать его так, чтобы оно содержало нужные вам символы. Существует также функция, которая, согласно документации, обеспечивает поддержку чисел с плавающей запятой.
Альтернативное решение - пустое поле перед чем-то другим
Вы также можете обманом заставить кого-то поверить, что он видит содержимое поля ввода , но показать ему что-то еще за полем (это некоторое расширение моего первоначального решения). Затем, если кто-то коснется поля, вы можете распространить правильное значение и т. Д., А затем вернуться к предыдущему состоянию по размытию. Смотрите этот код ( живой пример на jsfiddle - синий цвет означает, что вы смотрите на то, что находится за пределами поля):
// store original value from INPUT tag in jQuery's .data()
var input_field = jQuery('#number-field');
var display_span = jQuery('#number-container-value');
var base_val = parseFloat(input_field.val());
input_field.data('storedVal', base_val);
input_field.val('');
display_span.html(base_val);
// react to field gaining and losing focus
jQuery('#number-field').on('focus', function(event){
var el = jQuery(this);
var display = jQuery('#number-container-value');
if (typeof el.data('storedVal') != 'undefined'){
el.val(el.data('storedVal'));
};
display.html('');
}).on('blur', function(event){
var el = jQuery(this);
var display = jQuery('#number-container-value');
var new_val = parseFloat(el.val());
el.data('storedVal', new_val);
display.html(new_val);
el.val('');
});
(полный код со стайлингом находится на упомянутом jsfiddle). Код нуждается в сокращении и очистке, но это подтверждение концепции . Попробуйте и поделитесь своими выводами, пожалуйста.