el-input设置type为number时,输入中文光标上移及一系列问题

658 阅读1分钟

设置el-input的type为number:

<el-input type="number" v-model="value" class="inputPadding"/><span>&nbsp;&nbsp;</span>

出现的问题如下: image.png

解决问题一:输入中文时光标上移(解决后又出现一个新的问题,如下图所示)

/deep/ .el-input__inner {
    line-height: 1px !important;
}

解决问题二:上下箭头离右侧有padding距离

.inputPadding {
	width: 50%; //设置el-input框的宽度
	/deep/ .el-input__inner {
		padding-right: 0;
	}
}

image.png

解决问题三:上下箭头的line-height也变了,那就去掉上下箭头

/deep/.el-input input::-webkit-outer-spin-button,
/deep/.el-input input::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
}
/deep/.el-input input[type="number"] {
	-moz-appearance: textfield;
}


禁止键盘上下键事件

mounted() {
    this.showkey();
},
// el-input type=number时点击键盘上下键可以改变input中的值,这个方法是禁止改变
showkey() {
    document.onkeydown = function() {
        if (window.event.keyCode === 38 || window.event.keyCode === 40) {
            window.event.returnValue = false;
        }
    };
},

只能输入正整数

<el-input v-model="form.number" type="number" oninput="value = value.replace(/[^\d]/g, '')"></el-input>