vue的input中，如何限制只能输入number

Question

本来想用watch观察v-model的值，一旦不是数字，就让新值等于旧值，后来发现不行。h5的type="number"属性在手机上无效。有什么比较好的方法吗

<input v-model="num">

type="tel"的作用是直接弹出数字键盘吧，这样好像也不错

Answer 1

不是推荐用computed么？

        <div id="demo">
            <input v-model="inpNum"/>
            <p>
                {{inpNum}}
            </p>
        </div>

new Vue({
    el:'#demo',
    data:{
        oldNum:0    
    },
    computed:{
        inpNum:{
            get:function(){
                return this.oldNum;
            
            },
            set:function(newValue){
                this.oldNum=newValue.replace(/[^\d]/g,'');
            }
        }
    }
    
})

不过如果你说的是在输入过程中就改。。。那样用户体验未免有点。。。。

Answer 2

<input v-model.number="age" type="number">

Answer 3

看：https://segmentfault.com/a/11...
控制input只能输入数字
<input type="number">在pc和手机端都可以实现只能输入数字，可是手机端弹出的软键盘里面没有完成或者搜索按钮，搜了下，现在的HTML5 number的情况下并没有支持搜索按钮，type='text'是有的。所以曲线救国，控制表单只能输入数字。
起初的想法是先把在

<input type='text' @input="handleInput" :value="val"/>

handleInput(e){
this.val=e.target.value.replace(/[^\d]/g,'');
}

但是这种并不会实时刷新表单的数据，下面就会起作用

e.target.value=e.target.value.replace(/[^\d]/g,'');

优雅点的写法，用自定义指令：

//<input type="text" v-number-only />
 directives: {
        numberOnly: {
            bind: function(el) {
                el.handler = function() {
                    el.value = el.value.replace(/\D+/, '')
                }
                el.addEventListener('input', el.handler)
            },
            unbind: function(el) {
                el.removeEventListener('input', el.handler)
            }
        }
    }

Answer 4

<div id="demo">
    <input 
        type="text"
        placeholder="只能输入正整数"
        @input="change"
        @change="change"
        :value="inpNum"
    />
</div>

new Vue({
    el:'#demo',
    data: {
        oldNum: ''   
    },
    computed: {
        inpNum () {
            return this.oldNum
        }
    },
    methods: {
        change (event) {
            let val = event.target.value.trim()
            // 只能是正整数或空,可根据需求修改正则
            if (/^[1-9]\d*$|^$/.test(val)) {
                this.oldNum = val
            } else {
                event.target.value = this.oldNum
            }
        }
    }
})

https://jsfiddle.net/BarryZha...

Answer 5

如果是在移动端的话，可以这么做：

<input type="text" pattern="[0-9]*">

Answer 6

//<input v-model="num" v-number-only />
Vue.directive('numberOnly', {
    bind: function () {
        this.handler = function () {
            this.el.value = this.el.value.replace(/\D+/, '')
        }.bind(this)
        this.el.addEventListener('input', this.handler)
    },
    unbind: function () {
        this.el.removeEventListener('input', this.handler)
    }
})

Answer 7

封装了一个vue的限制数字的input框,增加了验证,有需要的可以直接拿来用.
链接

Answer 8

实现思路：就是不要用 v-model, 然后自己监测值的变化，在监测事件中进行值的判断。
参考： http://jsbin.com/nabafidapu/1...

Answer 9

  <input  onkeyup="this.value=this.value.replace(/\D/g,'')"/>

Answer 10

<input type="tel">

Answer 11

input type="tel"

Answer 12

手机上我没试过，看过类似文章，http://makaiqian.com/input-be...
其实可以扒扒淘宝类的看看源码。

如果你非要实现只能输入数字，可以试试这个组件 https://github.com/RoamIn/vue...，和使用原生的 input 基本没什么区别，直接上 v-model
这个组件有个缺点就是，如果你需要数字，需要注意最大值，因为不支持科学计数法，所以有效精度为 15 位，16就有可能超出最大浮点数范围了

Answer 13

watch: {

'phoneNumber': function (curVal, oldVal) {
  if (!curVal) {
    this.phoneNumber = ''
    return false
  }
  this.phoneNumber = curVal.match(/\d/ig) ? curVal.match(/\d/ig).join('') : ''
}

}

Answer 14

<input type="text" :value="num" @input="numberOnly(num, $event)" />

numberOnly:function (e, item) {
    item = e.target.value.replace(/[^\d]/g,'')
    e.target.value = item
}

或者偷懒

<input type="text" :value="num" @input="num = $event.target.value.replace(/[^\d]/g,'');$event.target.value = num" />

Answer 15

https://jsfiddle.net/ybd5xr9z/1/

Answer 16

在 input 元素的 @input 或者 @change 事件上绑定该函数即可

verifyInt(){
    e.target.value = e.target.value.replace(/[^\d]/g, ''); //只允许输入正整数
    if (e.target.value == '0') { //不允许输入0
        e.target.value = null;
    } else {
        e.target.value = e.target.value.replace(/^[0]+[0-9]*$/gi, '') //         replace(/^[0]+[0-9]*$/gi, "")是数字前面不能有0
    }
}

Answer 17

这边自定义了一个只能输入数字的组件，利用原生写的，之前准备修改 el-input 组件，发现其源码里面@input事件参数里面只支持传入string，而我想要直接获取整个事件对象 event 后来发现利用原生写其实很简单。这是链接，我封装成为了一个组件，有介绍如何放在父组件中使用。https://github.com/shiwanjun1994/vue-basic/tree/master/%E5%B8%B8%E7%94%A8%E7%BB%84%E4%BB%B6%E5%B0%81%E8%A3%85/components/CustomInput

Answer 18

<input v-model="num" lazy>

methods: {

check: functon () {
    if (typeof this.num !== 'number') {
        dosomething...
    }
}

}