Vue: type为number的input表单绑定数据后输入“0”开头的数字无法保留“0”

Created on 9 Jan 2017  ·  9Comments  ·  Source: vuejs/vue

Vue.js version

vue-cli: v2.7.0
vue: v2.1.7

Reproduction Link

http://codepen.io/mqhe2007/pen/Kadaoe

Steps to reproduce

What is Expected?

需要输入“012345”这6个数字

What is actually happening?

实际上结果却是“12345”

说明

为什么我一定要设置type为number呢,因为移动端项目,我需要默认弹出数字键盘,只能输入数字。
用type="tel"可以达到预期。
但是原本html5的type=“number“是允许首位数字为”0“的

Most helpful comment

Close per spec se

The type=number state is not appropriate for input that happens to only consist of numbers but isn’t strictly speaking a number. For example, it would be inappropriate for credit card numbers or US postal codes.

Alternatives can be found here http://stackoverflow.com/questions/3368546/what-input-field-type-forces-the-number-pad-mobile-keyboard-to-come-up-when-focu

All 9 comments

You have set input type to number.

@znck After reading the doc, I don't think it is an expected behavior. We should cast the result to number if and only if .number modifier is on. Because native input element allows user to input leading zero. @defcc should know it better.

Currently Vue handles .number and the input with number type in the same logic. Maybe we need to improvement the behavior to keep consistence with native number type input.

Because native input element allows user to input leading zero.

It does, but will revert to a real number (12345 instead of 012345). Basically, the value in <input type="number"> is always treated as Number. So I'd say the current behavior is correct.

I think it's good to remove leading zeros from the number. If you need leading zeros for a number you probably want to use the type="tel" on the input, don't you?

What about something like social security number? Native input's value property will always yield a string value. The only constraint is user can only input digit or decimal mark.

An input type is necessary here, at least for some mobile platforms, that informs browsers to pop up number pad for user.

What about something like social security number?

It's not a Number per-se. The value of a <input type="number"> field is a floating-point number, as per specs.

I'd say it's the same: not a number (in its strict meaning 😆 ) I'd use the type=tel for that one aswell

Close per spec se

The type=number state is not appropriate for input that happens to only consist of numbers but isn’t strictly speaking a number. For example, it would be inappropriate for credit card numbers or US postal codes.

Alternatives can be found here http://stackoverflow.com/questions/3368546/what-input-field-type-forces-the-number-pad-mobile-keyboard-to-come-up-when-focu

Was this page helpful?
0 / 5 - 0 ratings

Related issues

franciscolourenco picture franciscolourenco  ·  3Comments

fergaldoyle picture fergaldoyle  ·  3Comments

julianxhokaxhiu picture julianxhokaxhiu  ·  3Comments

hiendv picture hiendv  ·  3Comments

guan6 picture guan6  ·  3Comments