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"的更多相关文章

  1. 去掉 input type="number" 右边图标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 去除input[type=number]最右边的spinners(默认加减符号)

    // 去掉input[type=number]默认的加减号 input[type='number'] { -moz-appearance:textfield; } input[type=number] ...

  3. input[type=number]问题

    有时候对于只能输入数字的表单会有想要写成input[type=number]但是其中有一个问题 <input type="text" name="code" ...

  4. 动手写个数字输入框1:input[type=number]的遗憾

    前言  最近在用Polymer封装纯数字的输入框,开发过程中发现不少坑,也有很多值得研究的地方.本系列打算分4篇来叙述这段可歌可泣的踩坑经历: <动手写个数字输入框1:input[type=nu ...

  5. 限制input[type=number]的输入位数策略整理

    当我们使用类型number的input输入框的时候,我们可能需要限制输入的位数,这个时候通常会想到maxlength,但是maxlength是在number类型的时候是不支持的,下面是一些解决这种问题 ...

  6. CSS input type="number"出现上下箭头时解决方案

    input type="number"时录入内容不可控制,解决方案是在css中添加//火狐input[type=number] {      -moz-appearance:tex ...

  7. 加减号改变input[type=number]的数值,基于[zepto.js]

    通过点击加减号可以更改input的数值,样式如下图: 具体的html代码如下: <div class="xh-lxx-cart-count1"> <span cl ...

  8. 【笔记】移动端H5数字键盘input type=number的处理(IOS和Android)

    在Vue中的项目,基于VUX-UI开发,一个常见的需求: 1.金额输入框 2.弹出数字键盘 3.仅支持输入两位小数,限制最大11位数,不允许0开头 后续:与UI沟通后, 思路调整为限制输入,并减少正则 ...

  9. 清除input[type=number]的默认样式

    input[type=number] { -moz-appearance:textfield; } input[type=number]::-webkit-inner-spin-button, inp ...

  10. 去除input[type=number]的默认样式

    input[type=number] { -moz-appearance: textfield; } input[type=number]::-webkit-inner-spin-button, in ...

随机推荐

  1. 2.5 C#的数据类型

    在我们定义变量的时候需要使用数据类型,不同数据类型定义的变量,它的值的表现形式不同.比如整型主要表示整数,浮点型表示小数等等. C#中的数据类型有很多同C语言的相同,先学习一些简单的数据类型,其他的以 ...

  2. input中空格后的数据不显示

    bug,input中空格后的数据不显示     昨天在修bug,有一个bug是用户修改的个人信息的地址栏,输入有空格的话,空格后面的内容存不上,而且没有报错,奇怪了,只好跟踪下. 页面上的输入框就是个 ...

  3. 为什么要配置sdk-tools/platform-toools?

    为了方便使用Android SDK包含的开发工具,我们在系统环境变量中的Path设置Android SDK的安装目录下的tools目录. Android SDK中: platform-tools里有a ...

  4. java版模拟浏览器下载百度动漫图片到本地。

    package javaNet.Instance.ImageDownload; import java.io.BufferedReader; import java.io.File; import j ...

  5. Keras学习~第一个例子~跑MNIST

    import numpy as npimport gzip import struct import keras as ks import logging from keras.layers impo ...

  6. python+selenium 浏览器的问题

    以前用selenium调用firefox是不需要驱动的,最近安装了python3.52+最新的firefox 发现调不起来了 搜索以后发现Firefox 47+需要搞个firefox的驱动 gecko ...

  7. matlab画带标记的折线图

    1.不带标记的 如: x=[1,5,3,7,4] plot(x) 2. 带标记 plot(x,'-*') '-s'  表示方格 '-p' 表示五角星 '-d' 表示菱形 '-h' 表示六角形 '-+' ...

  8. iOS 简单的分段下载文件

    首先自己写个请求数据的类 首先.h文件 #import <Foundation/Foundation.h> @interface Downloaders : NSObject<NSU ...

  9. Could not load type 'System.ServiceModel.Activation.HttpModule' from assembly 'System.ServiceModel, Version=3.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089'

    Could not load type 'System.ServiceModel.Activation.HttpModule' from assembly 'System.ServiceModel, ...

  10. WebApi身份认证解决方案:Basic基础认证

    前言:最近,讨论到数据库安全的问题,于是就引出了WebApi服务没有加任何验证的问题.也就是说,任何人只要知道了接口的url,都能够模拟http请求去访问我们的服务接口,从而去增删改查数据库,这后果想 ...