mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-24 15:39:15 +08:00
fix(Field): should limit number input in iOS (#5520)
This commit is contained in:
neverland
GitHub
parent
ccdedecee7
commit
3bfcf671b9
@ -17,34 +17,45 @@ The value of field is bound with v-model.
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field v-model="value" placeholder="Username" />
|
||||
<van-field v-model="value" placeholder="Text" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Custom Type
|
||||
|
||||
Use `type` prop to custom different type fields.
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="username"
|
||||
required
|
||||
clearable
|
||||
label="Username"
|
||||
right-icon="question-o"
|
||||
placeholder="Username"
|
||||
@click-right-icon="$toast('question')"
|
||||
/>
|
||||
<van-field v-model="text" label="Text" />
|
||||
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
label="Password"
|
||||
placeholder="Password"
|
||||
required
|
||||
/>
|
||||
</van-cell-group>
|
||||
<van-field v-model="password" type="password" label="Password" />
|
||||
|
||||
<van-field v-model="number" type="number" label="Number" />
|
||||
|
||||
<van-field v-model="tel" type="tel" label="Phone" />
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tel: '',
|
||||
number: '',
|
||||
username: '',
|
||||
password: ''
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Disabled
|
||||
@ -52,9 +63,8 @@ Use `type` prop to custom different type fields.
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
label="Text"
|
||||
value="Disabled"
|
||||
label="Username"
|
||||
left-icon="contact"
|
||||
disabled
|
||||
/>
|
||||
</van-cell-group>
|
||||
|
||||
@ -17,38 +17,54 @@ Vue.use(Field);
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过`v-model`绑定输入框的值
|
||||
可以通过`v-model`双向绑定输入框的值，通过`placeholder`设置占位提示文字
|
||||
|
||||
```html
|
||||
<!-- Field 是基于 Cell 实现的，可以使用 CellGroup 作为父元素来提供外边框。 -->
|
||||
<van-cell-group>
|
||||
<van-field v-model="value" placeholder="请输入用户名" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 自定义类型
|
||||
|
||||
根据`type`属性定义不同类型的输入框
|
||||
根据`type`属性定义不同类型的输入框，默认值为`text`
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="username"
|
||||
required
|
||||
clearable
|
||||
label="用户名"
|
||||
right-icon="question-o"
|
||||
placeholder="请输入用户名"
|
||||
@click-right-icon="$toast('question')"
|
||||
/>
|
||||
<!-- type="text" 可以输入任意文本 -->
|
||||
<van-field v-model="text" label="文本" />
|
||||
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
label="密码"
|
||||
placeholder="请输入密码"
|
||||
required
|
||||
/>
|
||||
</van-cell-group>
|
||||
<!-- type="password" 表示输入密码 -->
|
||||
<van-field v-model="password" type="password" label="密码" />
|
||||
|
||||
<!-- type="number" 允许输入数字和小数点，调起全键盘 -->
|
||||
<van-field v-model="number" type="number" label="数字" />
|
||||
|
||||
<!-- type="tel" 输入手机号，调起手机号键盘 -->
|
||||
<van-field v-model="tel" type="tel" label="手机号" />
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tel: '',
|
||||
text: '',
|
||||
number: '',
|
||||
password: ''
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 禁用输入框
|
||||
@ -56,9 +72,8 @@ Vue.use(Field);
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
label="文本"
|
||||
value="输入框已禁用"
|
||||
label="用户名"
|
||||
left-icon="contact"
|
||||
disabled
|
||||
/>
|
||||
</van-cell-group>
|
||||
|
||||
@ -2,20 +2,16 @@
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-cell-group>
|
||||
<van-field v-model="value" :placeholder="$t('usernamePlaceholder')" />
|
||||
<van-field v-model="value" :placeholder="$t('textPlaceholder')" />
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="username"
|
||||
:label="$t('username')"
|
||||
:placeholder="$t('usernamePlaceholder')"
|
||||
required
|
||||
clearable
|
||||
right-icon="question-o"
|
||||
@click-right-icon="$toast('question')"
|
||||
v-model="text"
|
||||
:label="$t('text')"
|
||||
:placeholder="$t('textPlaceholder')"
|
||||
/>
|
||||
|
||||
<van-field
|
||||
@ -23,32 +19,40 @@
|
||||
type="password"
|
||||
:label="$t('password')"
|
||||
:placeholder="$t('passwordPlaceholder')"
|
||||
required
|
||||
/>
|
||||
|
||||
<van-field
|
||||
v-model="number"
|
||||
type="number"
|
||||
:label="$t('number')"
|
||||
:placeholder="$t('numberPlaceholder')"
|
||||
/>
|
||||
|
||||
<van-field
|
||||
v-model="phone"
|
||||
type="tel"
|
||||
:label="$t('phone')"
|
||||
:placeholder="$t('phonePlaceholder')"
|
||||
/>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
:value="$t('inputDisabled')"
|
||||
:label="$t('username')"
|
||||
left-icon="contact"
|
||||
disabled
|
||||
/>
|
||||
<van-field :value="$t('inputDisabled')" :label="$t('text')" disabled />
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title4')">
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="username2"
|
||||
v-model="username"
|
||||
:label="$t('username')"
|
||||
:placeholder="$t('usernamePlaceholder')"
|
||||
error
|
||||
/>
|
||||
<van-field
|
||||
v-model="phone"
|
||||
v-model="phone2"
|
||||
:label="$t('phone')"
|
||||
:placeholder="$t('phonePlaceholder')"
|
||||
:error-message="$t('phoneError')"
|
||||
@ -112,13 +116,18 @@ export default {
|
||||
title3: '禁用输入框',
|
||||
title4: '错误提示',
|
||||
title6: '插入按钮',
|
||||
message: '留言',
|
||||
phone: '手机号',
|
||||
sms: '短信验证码',
|
||||
tel: '手机号',
|
||||
text: '文本',
|
||||
phone: '手机号',
|
||||
number: '数字',
|
||||
message: '留言',
|
||||
sendSMS: '发送验证码',
|
||||
showWordLimit: '显示字数统计',
|
||||
textareaAutosize: '高度自适应',
|
||||
smsPlaceholder: '请输入短信验证码',
|
||||
textPlaceholder: '请输入文本',
|
||||
numberPlaceholder: '请输入数字',
|
||||
phonePlaceholder: '请输入手机号',
|
||||
messagePlaceholder: '请输入留言',
|
||||
inputDisabled: '输入框已禁用',
|
||||
@ -129,14 +138,19 @@ export default {
|
||||
title3: 'Disabled',
|
||||
title4: 'Error Info',
|
||||
title6: 'Insert Button',
|
||||
message: 'Message',
|
||||
phone: 'Phone',
|
||||
sms: 'SMS',
|
||||
tel: 'Tel',
|
||||
text: 'Text',
|
||||
phone: 'Phone',
|
||||
number: 'Number',
|
||||
message: 'Message',
|
||||
sendSMS: 'Send SMS',
|
||||
showWordLimit: 'Show Word Limit',
|
||||
textareaAutosize: 'Auto Resize',
|
||||
smsPlaceholder: 'SMS',
|
||||
textPlaceholder: 'Text',
|
||||
phonePlaceholder: 'Phone',
|
||||
numberPlaceholder: 'Number',
|
||||
messagePlaceholder: 'Message',
|
||||
inputDisabled: 'Disabled',
|
||||
phoneError: 'Invalid phone'
|
||||
@ -146,13 +160,16 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
sms: '',
|
||||
text: '',
|
||||
value: '',
|
||||
number: '',
|
||||
password: '',
|
||||
username: '',
|
||||
username2: '',
|
||||
message: '',
|
||||
message2: '',
|
||||
phone: '1365577'
|
||||
phone: '',
|
||||
phone2: '12345'
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
@ -7,6 +7,16 @@ import { createNamespace, isObj, isDef, addUnit } from '../utils';
|
||||
|
||||
const [createComponent, bem] = createNamespace('field');
|
||||
|
||||
function formatNumber(value) {
|
||||
const dotIndex = value.indexOf('.');
|
||||
|
||||
if (dotIndex > -1) {
|
||||
value = value.slice(0, dotIndex + 1) + value.slice(dotIndex).replace(/\./g, '');
|
||||
}
|
||||
|
||||
return value.replace(/[^0-9.]/g, '');
|
||||
}
|
||||
|
||||
export default createComponent({
|
||||
inheritAttrs: false,
|
||||
|
||||
@ -111,6 +121,16 @@ export default createComponent({
|
||||
target.value = value;
|
||||
}
|
||||
|
||||
if (this.type === 'number') {
|
||||
const originValue = value;
|
||||
|
||||
value = formatNumber(value);
|
||||
|
||||
if (value !== originValue) {
|
||||
target.value = value;
|
||||
}
|
||||
}
|
||||
|
||||
return value;
|
||||
},
|
||||
|
||||
@ -159,19 +179,6 @@ export default createComponent({
|
||||
},
|
||||
|
||||
onKeypress(event) {
|
||||
if (this.type === 'number') {
|
||||
const { keyCode } = event;
|
||||
const allowPoint = String(this.value).indexOf('.') === -1;
|
||||
const isValidKey =
|
||||
(keyCode >= 48 && keyCode <= 57) ||
|
||||
(keyCode === 46 && allowPoint) ||
|
||||
keyCode === 45;
|
||||
|
||||
if (!isValidKey) {
|
||||
preventDefault(event);
|
||||
}
|
||||
}
|
||||
|
||||
// trigger blur after click keyboard search button
|
||||
/* istanbul ignore next */
|
||||
if (this.type === 'search' && event.keyCode === 13) {
|
||||
@ -209,11 +216,7 @@ export default createComponent({
|
||||
const inputSlot = this.slots('input');
|
||||
|
||||
if (inputSlot) {
|
||||
return (
|
||||
<div class={bem('control', this.inputAlign)}>
|
||||
{inputSlot}
|
||||
</div>
|
||||
);
|
||||
return <div class={bem('control', this.inputAlign)}>{inputSlot}</div>;
|
||||
}
|
||||
|
||||
const inputProps = {
|
||||
@ -240,7 +243,10 @@ export default createComponent({
|
||||
return <textarea {...inputProps} />;
|
||||
}
|
||||
|
||||
return <input type={this.type} {...inputProps} />;
|
||||
// type="number" is weired in iOS
|
||||
const inputType = this.type === 'number' ? 'text' : this.type;
|
||||
|
||||
return <input type={inputType} {...inputProps} />;
|
||||
},
|
||||
|
||||
genLeftIcon() {
|
||||
@ -311,10 +317,16 @@ export default createComponent({
|
||||
<div class={bem('body')}>
|
||||
{this.genInput()}
|
||||
{this.showClear && (
|
||||
<Icon name="clear" class={bem('clear')} onTouchstart={this.onClear} />
|
||||
<Icon
|
||||
name="clear"
|
||||
class={bem('clear')}
|
||||
onTouchstart={this.onClear}
|
||||
/>
|
||||
)}
|
||||
{this.genRightIcon()}
|
||||
{slots('button') && <div class={bem('button')}>{slots('button')}</div>}
|
||||
{slots('button') && (
|
||||
<div class={bem('button')}>{slots('button')}</div>
|
||||
)}
|
||||
</div>
|
||||
{this.genWordLimit()}
|
||||
{this.errorMessage && (
|
||||
|
||||
@ -6,26 +6,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入用户名" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-cell--required van-field">
|
||||
<div class="van-cell__title van-field__label"><span>用户名</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入用户名" class="van-field__control">
|
||||
<div class="van-field__right-icon"><i class="van-icon van-icon-question-o">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--required van-field">
|
||||
<div class="van-cell__title van-field__label"><span>密码</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-field__body"><input type="password" placeholder="请输入密码" class="van-field__control"></div>
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入文本" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -33,9 +14,35 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-field__left-icon"><i class="van-icon van-icon-contact">
|
||||
<!----></i></div>
|
||||
<div class="van-cell__title van-field__label"><span>用户名</span></div>
|
||||
<div class="van-cell__title van-field__label"><span>文本</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入文本" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>密码</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-field__body"><input type="password" placeholder="请输入密码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>数字</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入数字" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>手机号</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="请输入手机号" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>文本</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-field__body"><input type="text" disabled="disabled" class="van-field__control"></div>
|
||||
</div>
|
||||
|
||||
@ -33,7 +33,7 @@ test('click icon event', () => {
|
||||
expect(wrapper.emitted('click-right-icon')[0][0]).toBeTruthy();
|
||||
});
|
||||
|
||||
test('keypress event', () => {
|
||||
test('number type', () => {
|
||||
const wrapper = mount(Field, {
|
||||
propsData: {
|
||||
value: '',
|
||||
@ -41,26 +41,19 @@ test('keypress event', () => {
|
||||
}
|
||||
});
|
||||
|
||||
const fn = jest.fn();
|
||||
const { calls } = fn.mock;
|
||||
const press = keyCode => wrapper.vm.onKeypress({
|
||||
keyCode,
|
||||
preventDefault: fn
|
||||
});
|
||||
const input = wrapper.find('input');
|
||||
|
||||
press(0);
|
||||
expect(calls.length).toBe(1);
|
||||
input.element.value = '1';
|
||||
input.trigger('input');
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual('1');
|
||||
|
||||
press(50);
|
||||
expect(calls.length).toBe(1);
|
||||
input.element.value = '1.2.';
|
||||
input.trigger('input');
|
||||
expect(wrapper.emitted('input')[1][0]).toEqual('1.2');
|
||||
|
||||
wrapper.setProps({ value: '0.1' });
|
||||
press(46);
|
||||
expect(calls.length).toBe(2);
|
||||
|
||||
wrapper.setProps({ type: 'text' });
|
||||
press(0);
|
||||
expect(calls.length).toBe(2);
|
||||
input.element.value = '123abc';
|
||||
input.trigger('input');
|
||||
expect(wrapper.emitted('input')[2][0]).toEqual('123');
|
||||
});
|
||||
|
||||
test('render textarea', async () => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user