文章目录
没想到呀!我曹某人混迹江湖几十载,居然会被测试说我input有bug。。。
提示
- 其实几乎所有浏览器的
input[type=number]
最后你获取的值也是string
类型的;
原因的话我认为是: 如果传输的数字过大,那就有可能出现精度丢失的问题(16位),前后端就不能进行正确的数据交互,所以用string
才是正解。 - 如果你就是要用
number
不是不阔以。(数据正不正确我不管,我就要用,就是玩儿!)
就在blur
的时候将 value 转换成number
类型就行了;
为什么不在input
的时候转呢? 因为这样你会永远都输入不了点.
float
类型 ,不信你可以试试
原生 onInput
实现
html
<input type="text" id="input" oninput="inputHandle()">
javascript
var inputNode = document.getElementById("input");
function inputHandle() {
var value = inputNode.value;
// 匹配规则: ± 号开头,匹配任意数字和 . (问题匹配到多个.)
value = value.match(/^[-+]{1}|[\d.]/g) || [];
value = ''.concat(...value);
// 消除 {2, n} 个点 '.'
const valueSplitArr = value.split('.');
value = '';
valueSplitArr.forEach((item, index) => {
value = (index === 1) ? value.concat(`.${
item}`) : value.concat(item);
});
inputNode.value = value;
}
vue 指令实现
用vue指令的话肯定是全局注册了
文件目录
inputNumberLimit.js 指令实现
/**
* DOM(输入框) 输入数据时,规范 input内容 ()
* @param {Object} vNode Vue 编译生成的虚拟节点(当前绑定节点)
* @param {DOM} el 指令所绑定的元素,可以用来直接操作 DOM。
*/
function inputHandle(vNode, el) {
const dom = el;
const vn = vNode;
let value = dom.value.toString().match(/^[-+]{1}|[\d.]/g) || []; // 匹配规则: ± 号开头,匹配任意数字和 . (问题匹配到多个.)
value = ''.concat(...value);
// 消除 {2, n} 个点 '.'
const valueSplitArr = value.split('.');
value = '';
valueSplitArr.forEach((item, index) => {
value = (index === 1) ? value.concat(`.${
item}`) : value.concat(item);
});
vn.context.value = value;
dom.value = value;
}
const inputNumberLimit = {
update(el, binding, vNode) {
inputHandle(vNode, el);
},
};
export default inputNumberLimit;
指令 index.js 汇总整理
import inputNumberLimit from './modules/inputNumberLimit';
const directives = {
inputNumberLimit,
// 新加的指令在这儿引入
};
export default {
// Vue.use() 其实就是调用 install(Vue) 方法
install(Vue) {
Object.keys(directives).forEach((key) => {
Vue.directive(key, directives[key]);
});
},
};
main.js 里面 use 一下
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import myDirection from './directive/index';
Vue.config.productionTip = false;
Vue.use(myDirection);
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');
页面直接使用
<!-- 同时用v-model绑定一下数据 --->
<input type="text" v-inputNumberLimit v-model="value">
{
{value}}