html5 input輸入實時檢測以及延時優化

2022-08-03 21:39:22 字數 754 閱讀 8021

有個專案是,這麼個情況,輸入框,實時監測輸入,觸發請求。

第一想法是input 上的onchange()方法,試了一下,不好用,是值等更改確認了,才會觸發,不即時。

上網查了一下,

$("#fix").on('input propertychange', function(event));

方法的確可以用,但是實時更改。傳送的頻率有點快啊。

趕緊加個定時器settimeout.

$("#fix").on('input propertychange', function(event),500);

});

問題又來了,定時器是非同步,雖然延遲,但是還會執行,沒啥改變。

後來又想到解綁unbind,bind,但是解綁的時間裡獲取不到鍵盤輸入的事件。

當時第一想法是,觸發事件-刪除定時器-新增定時器-執行函式。發現還是不好,定時器刪不掉,乾脆就不執行了。

最後上網查了一下,發現一種新方法。

時間戳法

原理就是,每次輸入修改全域性變數,時間戳,延遲0.5s監測 新的時間戳和和繫結的時間戳相等,就進行下一步。

-----html-----  

------script-----

var last;

$("#fix").on('input propertychange', function(event)

},500);

});

html5 Input限制輸入

js判斷只能是數字和小數點 測試寫了type屬性有時會失效 1.文字框只能輸入數字 小數點也不能輸入 input onkeyup this.value this.value.replace d g,onafterpaste this.value this.value.replace d g,2.只能...

HTML5 INPUT新增屬性

input新增的這些屬性,使得html和js的分工更明確了,使用起來十分舒暢。我們先看下input新增了的屬性 新增屬性一 autoconmplete autoconmplete可以賦值為 on 或者 off。當為 on的時候,瀏覽器能自動儲存使用者輸入的內容。當使用者返回到曾經填寫過值的頁面的時候...

HTML5 input輸入框限制字段長度

一種最簡單的方法就是直接在datatype屬性裡加限制 s1 5表示填1 5個字元,s0 6表示0 6個字元,但是這種方法有種缺陷就是不認標點符號了 上段 限制了輸入框長度為0 6,最少可以不填,最多6個字元,在這裡,乙個字母 如a a 乙個漢字,乙個數字都是占有乙個字元,但是!它不支援標點符號,如...