input输入框type=number时的一个缺陷
本来是在vue里发现获取不到 input[ type="number"]的值，就是输入两个小数点的数值，比如1.1.1，以为是vue的错误，然而不是，vue只做了数字处理
不明白为什么获取不到值还让输入两个小数点呢，这就尴尬了。
//vue里对输入的值做的处理
function toNumber (val) {
var n = parseFloat(val);
return isNaN(n) ? val : n;
}
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body>
<div id="app">
当input的type=number时，当输入的数据有两个小数点的时候，比如1.1.1，此时获取不到this.msg的值
<input type="number" v-model="msg" @input="check">
</div>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '',
},
methods: {
check(val) {
console.log(this.msg, 'this.msg');
}
}
})
</script> </body> </html>
所以呢，输入时数字的时候，可以用input[type="text"],直接用正则验证数值.
input输入框type=number时的一个缺陷的更多相关文章
- 移除HTML5 input在type="number"时的上下小箭头
/*移除HTML5 input在type="number"时的上下小箭头*/ input::-webkit-outer-spin-button, input::-webkit-in ...
- 移除input在type="number"时的上下箭头
网页在有些情况下,会需要input的输入的为单纯数字的文本框,此时type=number,但使用type=number时,输入框后面会有一个上下箭头,那么如何去掉上下箭头呢? <input ty ...
- 去掉input在type="number"时右边的上下箭头
加了代码之后: input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{ -webkit-appearance: none ...
- 如何移除HTML5 input在type="number"时的上下小箭头
在chrome下: input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appearance ...
- 【转】移除HTML5 input在type="number"时的上下小箭头
在chrome下: input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{ -webkit-appearance ...
- input输入框type=file时accept中可以限制的文件类型（转载）
转载自: input type=file accept中可以限制的文件类型 在上传文件的时候,需要限制指定的文件类型. <input type="file" accept=& ...
- 怎么去掉select的下拉箭头和输入框input类型为number时的上下箭头
一.去掉select的下拉箭头 方法一:在select外面加一个div,设置select宽度大于div的宽度,并加一个超出隐藏属性overflow:hidden,小三角会隐藏掉: 方法二:给selec ...
- input type="number"时，maxlength不起作用怎么解决
最近小颖在做公司的angular项目时,发现当input type="number"时,maxlength不起作用,百度了下解决方式,顺便记录下,以便后期查看嘻嘻 <inpu ...
- input输入框type设置为number，maxlength无效
一个小细节,以前很少注意,直到最近做的一个项目,当我把一个输入数字的input框的类型设置为number时,input框还是可以无限输入,设置maxlengh=10就不起作用了.然后我就去百度了一下, ...
随机推荐
- 10.2.0.5环境dg测试logminer挖掘日志分析
起因:客户需求,数据库正常每天总的日志切换是20以内,有一天日志切换总数,达到30,客户建议使用Logminer进行日志挖掘分析,到底什么应用导致的问题. 说明:使用logminer进行日志挖掘,只能 ...
- v$、v_$、gv$之间的关系
本次实验测试,oracle数据库视图中v$,v_$,gv$之间的关系 总结: v_$是动态性能视图,通过sql查询数据库基表返回记录.例如,v_$database对象是视图类型,可对其它用户授权访问: ...
- Mysql安装和基本使用
MySQL的介绍安装.启动 windows上制作服务 MySQL破解密码 MySQL中统一字符编码 MySQL MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Ora ...
- Java中的数组初探
1.数组的类型? Java中的数组为引用类型. 2.数组的三种初始化方式 1. int[] arr1=new int[] {1,2,3,4,}; 2. int[] arr2= {1,2,3,4,}; ...
- django cookie与session组件
本文目录 1 会话跟踪技术 2 cookie介绍 Django中操作Cookie Session Django中Session相关方法 Django中的Session配置 CBV中加装饰器 回到目录 ...
- numpy.array
关于python中的二维数组,主要有list和numpy.array两种. 好吧,其实还有matrices,但它必须是2维的,而numpy arrays (ndarrays) 可以是多维的. 我们主要 ...
- 开机或者安装系统时提示tsc: Fast TSC calibration failed解决方法
其实这个问题很简单,主要是时间不对的问题. 就拿我遇到这个问题来说.我是在vm虚拟机中安装了xenserver,然后在物理机安装xencenter连接xenserver,然后在安装新的虚拟机时遇到这个 ...
- Android.bp学习笔记
1.Android.bp简介 Android 7.0之后希望用Android.bp替换Android.mk,bp简单的配置更方便Ninja 文件的产生,而Blueprint和Soong 就此产生.An ...
- GPIO引脚操作
Kernel: 4.4 Soc: msm8996 1.用户空间通过sysfs操作GPIO (1)启用GPIO sysfs interface 首先看系统中有没有“/sys/class/gpio”这个文 ...
- 使用 pkg 打包分发 nodejs 应用
pkg 是一个很不错的跨平台 nodejs 应用打包工具,使用此工具,我们只需要给与用户提供一个简单的 可执行文件就可以了,同时代码也是二进制的,提高了代码的安全性 备注:测试demo 很简单,也比较 ...