移動端、手機網站中文輸入法下keyup事件部分按鍵無效


微信公眾平台開發時,客戶提需求“輸入框中輸入內容時,輸入框后邊顯示清除按鈕,清除輸入框中的內容”,使用“keyup”事件時在中文輸入法下部分按鍵keyup事件無效, 以下為解決方案。

綁定“input”和“propertychange”事件可以解決,以下為代碼:

    var bind_name="input";//定義所要綁定的事件名稱
    if(navigator.userAgent.indexOf("MSIE")!=-1) bind_name="propertychange";//判斷是否為IE內核 IE內核的事件名稱要改為propertychange
    /*輸入框鍵盤離開事件綁定*/
    $("input").bind(bind_name,function(){
        if(this.value!=null&&this.value!=""){
            var inputWidth=$(this).outerWidth();
            var inputHeight=$(this).outerHeight();
            var inputOffset =  $(this).offset();
            var inputTop=inputOffset.top;
            var inputLeft=inputOffset.left;
            $("#clearDiv").css({top:inputTop+2,left:inputLeft+inputWidth-27}).show();
            inputObj=this
        }else{
            $("#clearDiv").hide();
        }
    });

另外網上還有另一種解決方案,具體思路為給輸入框注冊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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM