zoukankan      html  css  js  c++  java
  • input框处理删除小图标的功能

    /**
         * 搜索中的删除小图标功能与按backspace键删内容时事件,用于清空搜索框内的文字;
         * inputId:表单ID名称      如:searchKeys
         */
        _clearSearchInput: function (inputId) {
            if (typeof inputId != "string") {
                return;
            }
            //input焦点
            var input_Focus = $("#" + inputId);
            //console.log(input_Focus);
    
            var closeIcon = input_Focus.parent().next(".clear_icon");
            var input_timer;
    
            //搜索框处理;
            input_Focus.bind("blur", function (e) {
                if (input_timer) {
                    clearInterval(input_timer);
                }
            }).bind("focus",function (e) {
                    //alert("a");
                    var that = this;
                    input_timer = setInterval(function () {
                        if (that.value == "") {
                            closeIcon.hide();
                        }else{
                            closeIcon.show();
                        }
                    }, 200);
                }).bind("keydown", function (e) {
                    e = e || window.event;
                    if (e.keyCode == 8) {
                        if (this.value == "") {
                            closeIcon.hide();
                        }
                    } else {
                        if(this.value == ""){
                            closeIcon.hide();
                        }else{
                            closeIcon.show();
                        }
    
                    }
    
            }).bind("change", function (e) {
                if ($.trim(input_Focus.val()).length > 0) {
                    closeIcon.show();
                }
            });
    
    
            //小图标处理;
            closeIcon.bind('tap', function (e) {
                input_Focus.focus().select(0, 0);
                input_Focus.val("");
                $(this).hide();
            });
    
    //        if($.trim(input_Focus.val()).length>0){
    //            closeIcon.show();
    //        }
        },
  • 相关阅读:
    video 属性和事件用法大全
    微信小程序 组件通信相关知识整理
    JavaScript实现登录窗口的拖拽
    JS 各种宽高
    CSS3 Animation
    CSS3 Transition
    CSS3 Transform
    vue 回到页面顶部
    element-ui 动态换肤
    Chrome浏览器下自动填充的输入框背景
  • 原文地址:https://www.cnblogs.com/lcx90/p/4453410.html
Copyright © 2011-2022 走看看