支撑
- 弹出数字键盘
- 小数点前自定义最多输入几位(默许11位)
- 小数点后自定义最多输入几位(默许4位)
- 假如设置小数点后为0位,则不许可输入小数点
- 处理IOS弹出体系键盘收起后,页面不恢复
<template>
<input
ref="number"
@input="input"
:placeholder="placeholder"
:value="value"
@blur="blur"
type="number">
</template>
<script>
export default {
props: {
value: { // 设置值
default: '',
type: null
},
integerDigits: { // 小数点前几位
default: 11,
type: Number
},
decimalDigits: { // 小数点后几位
default: 4,
type: Number
},
placeholder: { // 设置默许值
default: '',
type: String
}
},
data () {
return {
oldValue: this.value,
isDel: false, // 是不是是删除操纵
isDot: false // 是不是是小数点输入操纵
}
},
computed: {
},
components: {
},
created () {
},
methods: {
input (event) {
this.isDel = false
this.isDot = false
if (event.data === null) this.isDel = true
if (event.data === '.') this.isDot = true
let reg
if (this.decimalDigits > 0) {
reg = new RegExp(`(?!^0\\d)^(\\d{1,${this.integerDigits}}(\\.\\d{0,${this.decimalDigits}})?)?$`, 'g')
} else {
reg = new RegExp(`(?!^0\\d)^(\\d{1,${this.integerDigits}})?$`, 'g')
}
if (reg.test(event.target.value)) {
if (event.target.value !== '' || this.isDel) { // 假如不是由于退却,让值变空,就不转变旧值
this.oldValue = event.target.value
}
}
if (this.isDot) {
if ((event.target.value && /\./g.test(event.target.value)) || this.decimalDigits === 0) {
event.target.value = null // 过剩的.强迫革新
}
}
event.target.value = this.oldValue
this.$emit('input', this.oldValue)
},
blur () {
this.resolveBug()
},
resolveBug(){
clearTimeout(this.timer)
this.timer=setTimeout(function(){
if(document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA'){
return
}
let result = 'pc';
if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { // 推断iPhone|iPad|iPod|iOS
result = 'ios'
}else if(/(Android)/i.test(navigator.userAgent)) { // 推断Android
result = 'android'
}
if(result === 'ios' ){
document.activeElement.scrollIntoViewIfNeeded(true);
}
},10)
}
}
}
</script>
<style scoped>
</style>
运用体式格局
<NumberInput
:integerDigits="4"
:decimalDigits="2"
class="input"
v-model="value"/>
处理点:
- 不许可输入类似于 “0666”, “0006”
- 不许可输入过剩的 “.”, 如输入 “3.02.”
备注:假如对你有协助,请帮助点个赞