input type="number"
input控件数字输入控制总结:
1、type="number"
12---->12. 这样的变化js无法捕获
未输入model值为 undefined,输入之后清空model值为 null
解法思路:
1、正则匹配提交之前判断
2、监听keyup事件、keydown事件
不让输入 监控键盘code、
if (theEvent.preventDefault) {
theEvent.preventDefault();
} else { // ie
theEvent.returnValue = false;
}
重新替换
element.val( value ? value[0] : null);
情景:
移动端 input控件,调数字键盘,在输入小数点时光标会自动跳到小数点前面。安卓6.0.1的版本会这样。
question:
1、调原生数字键盘的方法,必须用 type="number"?(用type="text",正则校验比较简单)
通过其他约定的属性 调原生数字键盘,这时 修改type="text"
网上有人说,增加h5属性 pattern="[0-9]", (经试验没什么用)
1、如何区分数字12.0和12
如何用js表示 "形如12. " 这样的数字
2、如何拿到 input inner-editor的值,查看浏览器代理,这是浏览器渲染的
3、光标位置的控制
浏览器:IE、非IE
function getTxt1CursorPosition(){
var oTxt1 = document.getElementById("txt1");
var cursurPosition=-1;
if(oTxt1.selectionStart){//非IE浏览器
cursurPosition= oTxt1.selectionStart;
}else{//IE
var range = document.selection.createRange();
range.moveStart("character",-oTxt1.value.length);
cursurPosition=range.text.length;
}
alert(cursurPosition);
}
type="number"时 不支持 ,DOM的光标位置属性,type="text" 时支持

4、chrome中, 如果输入了一些非数字的字符,就会返回undefined 通过event.currentTarget.validity.badInput=== true可以捕捉到这一信息,event.currentTarget.validity.valid(这一属性很渣,12.3时竟然是false)
修正keyAllow(angular.js写的一个指令)
if (keyAllow === "amount") {
var model = element.attr("v-model");
value = value.match(/^[0-9]*(\.?[0-9]{0,2})/);
element.attr("maxlength", value[0].indexOf(".") > -1 ? value[0].indexOf(".") + 3 : '');
value = parseFloat(value);
scope[model] = value;
var eVal = event.currentTarget.validity;
if(eVal.badInput){
if((scope.oldValue+'')== 'undefined'){
element.val('');
}else if((scope.oldValue+'').length > 1){
scope[model] = scope.oldValue;
}else{
element.val('');
}
}
if(!isNaN(value)){
scope.oldValue = value;
}
return;
}
其他思路:
使用 event.stopPropagation() 阻止默认行为。input 元素的 keydown 事件发生并处理后,浏览器默认会将用户键入的字符自动追加到 input 元素的值中
微信不支持keyup, keydown, keyup?事件对象思路
input type="number"的更多相关文章
- 去掉 input type="number" 右边图标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 去除input[type=number]最右边的spinners(默认加减符号)
// 去掉input[type=number]默认的加减号 input[type='number'] { -moz-appearance:textfield; } input[type=number] ...
- input[type=number]问题
有时候对于只能输入数字的表单会有想要写成input[type=number]但是其中有一个问题 <input type="text" name="code" ...
- 动手写个数字输入框1:input[type=number]的遗憾
前言 最近在用Polymer封装纯数字的输入框,开发过程中发现不少坑,也有很多值得研究的地方.本系列打算分4篇来叙述这段可歌可泣的踩坑经历: <动手写个数字输入框1:input[type=nu ...
- 限制input[type=number]的输入位数策略整理
当我们使用类型number的input输入框的时候,我们可能需要限制输入的位数,这个时候通常会想到maxlength,但是maxlength是在number类型的时候是不支持的,下面是一些解决这种问题 ...
- CSS input type="number"出现上下箭头时解决方案
input type="number"时录入内容不可控制,解决方案是在css中添加//火狐input[type=number] { -moz-appearance:tex ...
- 加减号改变input[type=number]的数值,基于[zepto.js]
通过点击加减号可以更改input的数值,样式如下图: 具体的html代码如下: <div class="xh-lxx-cart-count1"> <span cl ...
- 【笔记】移动端H5数字键盘input type=number的处理(IOS和Android)
在Vue中的项目,基于VUX-UI开发,一个常见的需求: 1.金额输入框 2.弹出数字键盘 3.仅支持输入两位小数,限制最大11位数,不允许0开头 后续:与UI沟通后, 思路调整为限制输入,并减少正则 ...
- 清除input[type=number]的默认样式
input[type=number] { -moz-appearance:textfield; } input[type=number]::-webkit-inner-spin-button, inp ...
- 去除input[type=number]的默认样式
input[type=number] { -moz-appearance: textfield; } input[type=number]::-webkit-inner-spin-button, in ...
随机推荐
- 关于nodejs能同时接受多少个请求的问题?////zzz
关于nodejs能同时接受多少个请求的问题? 最近学习node,看了很多教程,都在赞扬nodejs的异步I/O,异步I/O的特点就是,每接收一个请求,使用异步调用处理请求,不用等待结果,可以继续运行其 ...
- Html5shiv
说明编辑 越来越多的站点开始使用 HTML5 标签.但情况是还有很多人在使用IE6,IE7,IE8.为了让所有网站浏览者都能正常的访问网站, 2解决方案编辑 有下面两个: 为网站创建多套模板,通过程序 ...
- C++11基于范围的for循环
C++11包含一种新的 for 循环,称为基于范围的 for 循环,可以简化对数组元素的遍历.格式如下: for(Type VarName : Array){ //每个元素的值会依次赋给 VarNam ...
- winApi
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.R ...
- MQ通道配置
转自:http://www.cnblogs.com/me115/p/3471788.html MQ通道配置 通道是用来连接两个队列管理器的: 在单个队列管理器内读写消息不需要建立通道:但在一个队列管理 ...
- 关于strlen误用的一点记录
今天帮一个朋友查一个错误,是运行时报vector iterator incompatible,一般这种问题是向量和迭代器的类型不兼容,或者是进行迭代器判等时前后向量的结构发生变化,如erase操作之后 ...
- PHP动态图像的创建要如何实现呢?
with-gd=[/path/to/gd] --with-jpeg-dir=[/path/to/jpeg-6b] --with-t1lib=[/path/to/t1lib] 完成添加后执行make命 ...
- github开发
从0开始学习 GitHub 系列之「初识 GitHub」 从0开始学习 GitHub 系列之「加入 GitHub」 从0开始学习 GitHub 系列之「Git 速成」 从0开始学习 GitHub 系列 ...
- 让 MySQL 在 Linux 下表名不区分大小写(实为表名全小写)
把 Windows 下的应用部署到 Linux 下,使用到了 Quartz 集群的特性,所以建了 MySql 的中间表,一启动看到报错: Invocation of init method faile ...
- (转)漫谈SOA(面向服务架构)
http://blog.csdn.net/luohuacanyue/article/details/12521699 面向服务架构的思想在整个软件的架构中已经不是什么新鲜的东西.我简单的认为服务化是模 ...