input type="number"

情景:

  移动端 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?事件对象思路

时间: 2024-10-07 06:39:39

input type="number"的相关文章

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

// 去掉input[type=number]默认的加减号 input[type='number'] { -moz-appearance:textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number]有时会出现默认的加减spinne

去掉 input type="number" 在浏览器中遗留的图标样式

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{  /* chrome */     -webkit-appearance: none!important;      margin: 0;  }input[type="number"]{-moz-appearance:textfield; /*Firefox*/}

html5 input type number 去掉加减号

在chrome下: input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{    -webkit-appearance: none !important;    margin: 0; } Firefox下: input[type="number"]{-moz-appearance:textfield;}

去除<input type="number" /> 上下箭头

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0; } input[type="number"] { -moz-appearance: textfield; }

input type="number" 禁止输入E

$('input[type=number]').keypress(function(e) { if (!String.fromCharCode(e.keyCode).match(/[0-9\.]/)) { return false; } }); fromCharCode()是String的一个方法,可接受一个指定的Unicode值,返回一个字符串 使用方法:String.formCharCode()

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

input type="number"时录入内容不可控制,解决方案是在css中添加//火狐input[type=number] {      -moz-appearance:textfield;  } //谷歌input[type=number]::-webkit-inner-spin-button,  input[type=number]::-webkit-outer-spin-button {      -webkit-appearance: none;      margin:

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

在Vue中的项目,基于VUX-UI开发,一个常见的需求: 1.金额输入框 2.弹出数字键盘 3.仅支持输入两位小数,限制最大11位数,不允许0开头 第一,首先想到额就是在VUX-UI中制定type=number.--不可行 VUX中的文档和代码说明,type=number不支持maxLength,会报错,而且没有正则替换的处理或者钩子函数,只有输入后提示校验信息. 第二,基于VUX中XInput封装,有如下问题 1)两层v-model,正则替换的值不会触发input框渲染 解决:currentV

input type = number 去除上下箭头,禁用滚轮事件(默认的自带滚轮加减数字)

<style type="text/css"> /*盒子大小从边框开始计算*/ html * { box-sizing: border-box; } /*解决模态框抖动*/ html { overflow-y: scroll; -ms-overflow-style: none; } /* 隐藏滚动条 */ html::-webkit-scrollbar { display: none; } body { font-family: "Helvetica Neue&q

移除HTML5 input在type=&quot;number&quot;时的上下小箭头

/*移除HTML5 input在type="number"时的上下小箭头*/ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{ -webkit-appearance: none !important; margin: 0; } input[type="number"]{-moz-appearance:textfield;}