Home > Article > Web Front-end > Sharing the solution to the failure of jquery mobile keyboard keyup

Sharing the solution to the failure of jquery mobile keyboard keyup

黄舟Original: 2017-06-27 14:23:192621browse

In a recent touch screen version project, I encountered the problem of monitoring the input value. Using keyup, it was no problem to press the other keys on the keyboard on the mobile phone, but the delete key could not be monitored. Find the solution below online.

(Original text from: http://blog.csdn.net/kongjiea/article/details/40186121)

The search box is based on the user The input value is retrieved in real time. At first, I naturally think of keyup. In Pinyin state , there is no problem.

Question 1: Switch to Chinese input Method, the problem came out, the keyup event was not working properly. Later, I searched on the Internet and found the idea,

Question 2: During the development of the WeChat public platform, a customer asked for "When entering content in the input box, a clear button will be displayed behind the input box to clear the content in the input box." When using the "keyup" event, some keyup events will occur under the Chinese input method. Invalid,

Method 1: Mainly register the focus event for the search box and retrieve it at intervals , post the code

<script language="javascript" type="text/javascript" src="jquery.js"></script>  
    <script>  
  
    $(function () {  
        $(&#39;#wd&#39;).bind(&#39;focus&#39;,filter_time);  
    })  
  
    var str = &#39;&#39;;  
    var now = &#39;&#39;  
    filter_time = function(){  
        var time = setInterval(filter_staff_from_exist, 100);  
        $(this).bind(&#39;blur&#39;,function(){  
            clearInterval(time);  
        });  
    };  
  
    filter_staff_from_exist = function(){  
        now = $.trim($(&#39;#wd&#39;).val());  
        if (now != &#39;&#39; && now != str) {  
            console.log(now);  
        }  
        str = now;  
    }  
    </script>

Method 2: Use input and propertychange events to solve the problem,

I can only use the dom2 binding method for testing Such asdocument.getElementById('box').addEventListener('input',function(){...dosomething...},false);

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 = &#39;input&#39;;  
            if (navigator.userAgent.indexOf("MSIE") != -1){  
                bind_name = &#39;propertychange&#39;;  
            }  
            $(&#39;#inputorp_i&#39;).bind(bind_name, function(){  
                $(&#39;#inputorp_s&#39;).text($(this).val());  
            })  
        </script>  
    </p>  
</body>  
</html>

But some people say to use jq method Binding can be as follows:

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

or native:

<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>

Finally, please note The is :oninput Both events, onpropertychange and onpropertychange, have a small bug in IE9, that is, they will not be triggered when deleting content through the cut and delete commands in the right-click menu. However, other versions of IE are normal, and it is not very good at the moment. s solution. However, oninput & onpropertychange is still the best way to monitor input box value changes..

The above is the detailed content of Sharing the solution to the failure of jquery mobile keyboard keyup. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Why is the keyup event not executed in jquery?Next article：Why is the keyup event not executed in jquery?

See more

Sharing the solution to the failure of jquery mobile keyboard keyup

Related articles