|
input输入框有很多的type,但是有些type是有坑的,举个栗子,type=“number”
乍看之下是不是觉得type是number的时候只能输入数字?那可就错了,type=“number”实际上是可以输入很多东西的, 可以输入e,可以输入+-.等内容。而且,它的默认样式会出现一个上下加减的按钮,可以说是很影响美观了,但是要怎么处理呢? 首先,干掉右边的按钮, html <span class="jumpinp"><input type="number" v-model="changePage"></span>css .jumpinp input::-webkit-outer-spin-button, .jumpinp input::-webkit-inner-spin-button { -webkit-appearance: none; } .jumpinp input[type="number"] { -moz-appearance: textfield; } 以上操作就可以灭掉右边的按钮了 接下来处理一下输入框可以输入很多非数字的问题(这里是去除掉了小数点的,要保留的话需要自己重新写正则去验证) <span class="jumpinp"><input type="number" v-model="changePage" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"></span> |
|