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就不起作用了.然后我就去百度了一下, ...
随机推荐
- post-image.sh hacking
#********************************************************************************* #* post-image.sh ...
- Vue.js学习使用心得（三）
一.计算属性 计算属性关键词: computed <body> <div id="app"> <p>原始字符串: {{ message }}&l ...
- 单调栈运用2----(xdoj-1156)
#include <bits/stdc++.h> using namespace std; ; int num[N]; int len; int top; int t; deque < ...
- PDO数据库引擎
PDO概述1.PDO是一种数据库访问抽象层,你不必使用以前的 mysqli_xx 之类只能访问 mysql数据库.使用PDO可以连接mysql.msssql.oracle等等,而不必重写代码.2.PD ...
- acm 2072
////////////////////////////////////////////////////////////////////////////////#include<iostream ...
- Linux下7z工具安装
sudo apt-get install p7zip p7zip-full p7zip-rar 使用: 使用7z --help查看使用方法. 解压: 7za X test.7z
- Mybatis（四）
参考网址如下: http://www.cnblogs.com/xdp-gacl/p/4264425.html 向大家推荐 博客园 孤傲苍狼 大哥的博客,东西写的有水平.小弟记录一下自己的学习历程,自勉 ...
- ionic打包步骤（安卓）
打包APP之前要做的工作: ionic resources -icon : [创建一个app图标]: 以png/psd/AI格式保存在项目目录下的:resource/android/icon.png ...
- LOJ3048 「十二省联考 2019」异或粽子
题意 题目描述 小粽是一个喜欢吃粽子的好孩子.今天她在家里自己做起了粽子. 小粽面前有 $n$ 种互不相同的粽子馅儿,小粽将它们摆放为了一排,并从左至右编号为 $1$ 到 $n$.第 $i$ 种馅儿具 ...
- LG4238 【【模板】多项式求逆】
前言 学习了Great_Influence的递推实现,我给大家说一下多项式求逆严格的边界条件,因为我发现改动一些很小的边界条件都会使程序出错.怎么办,背代码吗?背代码是不可能,这辈子都不会背代码的.理 ...