blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(Field): improve number keyboard

Browse Source
This commit is contained in:
chenjiahan 2020-03-11 11:23:24 +08:00
parent 1f4ab5bb56
commit e89baa12ae
5 changed files with 13 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/field/README.zh-CN.md
View File

@ -45,9 +45,9 @@ export default {
<van-field v-model="text" label="文本" />
<!-- 输入手机号，调起手机号键盘 -->
<van-field v-model="tel" type="tel" label="手机号" />
<!-- 允许输入整数，调起数字键盘 -->
<!-- 允许输入整数，调起纯数字键盘 -->
<van-field v-model="digit" type="digit" label="整数" />
<!-- 允许输入数字，调起全键盘 -->
<!-- 允许输入数字，调起带符号的纯数字键盘 -->
<van-field v-model="number" type="number" label="数字" />
<!-- 输入密码 -->
<van-field v-model="password" type="password" label="密码" />

18
src/field/index.js
View File

@ -1,6 +1,5 @@
// Utils
import { formatNumber } from './utils';
import { isIOS } from '../utils/validate/system';
import { preventDefault } from '../utils/dom/event';
import { resetScroll } from '../utils/dom/reset-scroll';
import {
@ -419,24 +418,21 @@ export default createComponent({
}
let inputType = type;
let inputMode;
// type="number" is weired in iOS
// type="number" is weired in iOS, and can't prevent dot in Android
// so use inputmode to set keyboard in mordern browers
if (type === 'number') {
inputType = 'text';
inputMode = 'decimal';
}
if (type === 'digit') {
// set pattern to show number keyboard in iOS
if (isIOS()) {
inputType = 'number';
inputProps.attrs.pattern = '\\d*';
// cannot prevent dot when type is number in Android, so use tel
} else {
inputType = 'tel';
}
inputType = 'tel';
inputMode = 'numeric';
}
return <input type={inputType} {...inputProps} />;
return <input type={inputType} inputmode={inputMode} {...inputProps} />;
},
genLeftIcon() {

4
src/field/test/__snapshots__/demo.spec.js.snap
View File

@ -27,13 +27,13 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>整数</span></div>
<div class="van-cell__value van-field__value">
<div class="van-field__body"><input type="tel" placeholder="请输入整数" class="van-field__control"></div>
<div class="van-field__body"><input type="tel" inputmode="numeric" 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 van-field__value">
<div class="van-field__body"><input type="text" placeholder="请输入数字（支持小数）" class="van-field__control"></div>
<div class="van-field__body"><input type="text" inputmode="decimal" placeholder="请输入数字（支持小数）" class="van-field__control"></div>
</div>
</div>
<div class="van-cell van-field">

4
src/stepper/index.js
View File

@ -290,13 +290,11 @@ export default createComponent({
{...createListeners('minus')}
/>
<input
type="number"
type={this.integer ? 'tel' : 'number'}
role="spinbutton"
class={bem('input')}
// set keyboard in mordern browers
inputmode={this.integer ? 'numeric' : 'decimal'}
// set keyboard in iOS 8 ~ 12
pattern={this.integer ? '\\d*' : null}
value={this.currentValue}
style={this.inputStyle}
disabled={this.disabled}

2
src/stepper/test/__snapshots__/demo.spec.js.snap
View File

@ -23,7 +23,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell van-cell--center">
<div class="van-cell__title"><span>限制输入整数</span></div>
<div class="van-cell__value">
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" inputmode="numeric" pattern="\\d*" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="tel" role="spinbutton" inputmode="numeric" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
</div>
</div>
<div class="van-cell van-cell--center">