移動端(html5)Safari下用keyup實時監控input值的變化無效

阿新 • • 發佈：2019-01-09

搜尋框依據使用者輸入的值實時檢索，一開始自然而然想到keyup，在拼音狀態時，啥問題也沒有，
問題1：切換到中文輸入法，問題出來了，keyup事件不靈便了，後來在網上搜了下，找到了思路，
問題2：微信公眾平臺開發時，客戶提需求“輸入框中輸入內容時，輸入框後邊顯示清除按鈕，清除輸入框中的內容”，使用“keyup”事件時在中文輸入法下部分按鍵keyup事件無效，
方法一：主要是給搜尋框註冊focus事件，隔個時間去檢索下，貼出程式碼

<script language="javascript" type="text/javascript" src="jquery.js"></script 
>
    <script>

    $(function () {
        $('#wd').bind('focus',filter_time);
    })

    var str = '';
    var now = ''
    filter_time = function(){
        var time = setInterval(filter_staff_from_exist, 100);
        $(this).bind('blur',function(){
            clearInterval(time);
        });
    };

    filter_staff_from_exist = function 
(){
        now = $.trim($('#wd').val());
        if (now != '' && now != str) {
            console.log(now);
        }
        str = now;
    }
    </script>

方法二：用 input 和 propertychange事件可以解決，

<html>
<head>
<script type="text/javascript" src="http://www.zlovezl.cn/static/js/jquery-1.4.2.min.js" 
></script>
</head>
<body>
    <p>
        使用oninput以及onpropertychange事件檢測文字框內容：
    </p>
    <p>
        <input type="text" name="inputorp_i" id="inputorp_i" autocomplete="off"/>
        <span id="inputorp_s"></span>
        <script type="text/javascript">
            //先判斷瀏覽器是不是萬惡的IE，沒辦法，寫的東西也有IE使用者
            var bind_name = 'input';
            if (navigator.userAgent.indexOf("MSIE") != -1){
                bind_name = 'propertychange';
            }
            $('#inputorp_i').bind(bind_name, function(){
                $('#inputorp_s').text($(this).val());
            })
        </script>
    </p>
</body>
</html>

三、jq方式繫結即可如:

$('#input').bind('input propertychange', function() {  
    alert("....")  
 });

四、原生js繫結

<script type="text/javascript">
// Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
function OnInput (event) {
    alert ("The new content: " + event.target.value);
}
// Internet Explorer
function OnPropChanged (event) {
    if (event.propertyName.toLowerCase () == "value") {
        alert ("The new content: " + event.srcElement.value);
    }
} 
</script>

<body>
    <input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />
</body>

最後需要注意的是：oninput 和 onpropertychange 這兩個事件在 IE9 中都有個小BUG，那就是通過右鍵選單選單中的剪下和刪除命令刪除內容的時候不會觸發，而 IE 其他版本都是正常的，目前還沒有很好的解決方案。不過 oninput & onpropertychange 仍然是監聽輸入框值變化的最佳方案..

移動端(html5)Safari下用keyup實時監控input值的變化無效

移動端(html5)Safari下用keyup實時監控input值的變化無效

原生JS實時獲取input值變化

用rem在移動端不同解析度下的完美顯示

移動端HTML5，ios(針對safari瀏覽器)點選事件閃現黑灰色背景解決方案

移動端通過js來用rem控制字體大小的用法

移動端表單驗證用戶名與手機號

Iphone移動Web和safari下輸入文本無法顯示或者顯示看不到的問題

移動端HTML5開發選擇方案

移動端html5頁面長按實現高亮全選文字內容的相容解決方案

移動端自定義下拉框【H5+js+css】

移動端HTML5 檔案預覽及上傳

移動端 html5 meta標籤的設定含義

移動端HTML5導航欄吸頂：IOS（sticky）和Android兩種實現方式

移動端html5圖片上傳方法【更好的相容安卓IOS和微信】

移動端某些網路下域名無法解析的DNS問題

移動端布局要用到的東西

求助下如何現在實時監控網頁一些數據

用Spotlight實時監控Windows Server 08

移動端車牌識別的發展歷程，看車牌識別變化

java讀取系統Properties配置檔案利用執行緒實時監控配置檔案變化

移動端(html5)Safari下用keyup實時監控input值的變化無效

相關推薦