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？事件對象思路