美文网首页
vue中input输入框输入内容控制

vue中input输入框输入内容控制

作者: 雨后晴阳 | 来源:发表于2019-10-30 09:56 被阅读0次

    1.只能输入字母数字和下划线

    <el-input placeholder="请输入内容" onkeyup="this.value=this.value.replace(/[^_A-Za-z0-9-]/,'')"

              v-model.trim="item.skuNo" ></el-input>

    2.只能输入数字,用的是directives自定义钩子

    <el-input type="number" v-enterNumber v-model.trim="createdOrder.quantity" @change="detailQuantity"></el-input>

    directives: {

        enterNumber: {

            inserted(el, binding, vnode, oldVnode) {

                el.addEventListener("keypress", function (e) {

                    e = e || window.event;

                    let charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode;

                    let re = /\d/;

                    if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {

                        if (e.preventDefault) {

                            e.preventDefault();

                        } else {

                            e.returnValue = false;

    }

    }

    })

    }

    }

    },

    3.只能输入数字和小数点

    <el-input placeholder="请输入内容" type="text" v-model.trim="item.weight" @change="summation('weight')"  onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,10})?).*$/g, '$1')"  @input="item.weight=numberValidaeta(item.weight)"></el-input>

    相关文章

      网友评论

          本文标题:vue中input输入框输入内容控制

          本文链接:https://www.haomeiwen.com/subject/qktovctx.html