javascript - 移动端如何点击屏幕以及滑动的时候取消输入框的焦点
PHP中文网
PHP中文网 2017-04-11 12:49:57
0
2
441

现在手机上点击搜索之后滑动会一直弹出软键盘很是郁闷
希望实现点击屏幕其他地方 以及滑动能取消输入框焦点的效果

Enumerable = $.Enumerable;
var pageTab = 1;
var startMaxNum1 = 0, startMaxNum2 = 0, startMaxNum3 = 0, startMaxNum4 = 0;
var startMinNum1 = 0, startMinNum2 = 0, startMinNum3 = 0, startMinNum4 = 0;
var handle1 = 0, handle2 = 0, handle3 = 0, handle4 = 0; //初始为0,无状态;1表示下拉,2表示上拉
var myScroll;
$(function () {
    var requestf5 = document.getElementById("requestf5");
    myScroll = new IScroll('#wrapper', {
        hScrollbar: false,
        vScrollbar: false,
        mouseWheel: true, //是否监听鼠标滚轮事件
        bounceTime: 500, //弹力动画持续的毫秒数
        probeType: 3,
        click: true
    });
    myScroll.on('scroll', function () {
        if (this.y > 5) { //下拉刷新效果 ,标识设置为1
            handle1 = 1;
            if (this.y > 20) {
                requestf5.style.opacity = 1;
            } else {
                requestf5.style.opacity = 0;
            };
        } else if (this.y < (this.maxScrollY - 5)) { //上拉刷新效果 ,表示设置为2
            handle1 = 2;
        };
    });
    myScroll.on('scrollEnd', function () {
        if (handle1 == 1) { //下拉刷新处理
            startMaxNum1 = 0;
            startMinNum1 = 0;
            GetOrderList(pageTab);
            handle1 = 0; //重设为0,改为无状态
        } else if (handle1 == 2) { //上拉刷新处理
            GetOrderList(pageTab);
            handle1 = 0; //重设为0,改为无状态
        } else {
            handle1 = 0;
        };
    });
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    var mySwiper = new Swiper('.swiper-container', {
        direction: 'horizontal',
        pagination: '.swiper-pagination',
        //paginationClickable: true,
        onTransitionEnd: function (swiper) {
            $('#nav li').eq(mySwiper.activeIndex).addClass('active').siblings().removeClass('active');
            var tabIndex = $('#nav li').eq(mySwiper.activeIndex).data("id");
            pageTab = tabIndex;
            $("#pOrder" + tabIndex).show().siblings().hide();
            myScroll.scrollTo(0, 0);
            GetOrderList(tabIndex);
        }
    });
    $('#nav li').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
        mySwiper.slideTo($(this).index(), 500);
        var tabIndex = $(this).data("id");
        pageTab = tabIndex;
        $("#pOrder" + tabIndex).show().siblings().hide();
        myScroll.scrollTo(0, 0);
        GetOrderList(tabIndex);
    });
    FastClick.attach(document.body);
    GetOrderList(1);

    var hideKeyboard = function() {
        document.activeElement.blur();
        $("input").blur();
    };
    hideKeyboard();
    
});
//rem布局动态修改html font-size
(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if (clientWidth >= 640) {
                docEl.style.fontSize = '100px';
            } else {
                docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
            }
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

function GetOrderList(tabIndex) {
    var direction = 1, startNum = 0;
    if (tabIndex == 1) {
        if (handle1 == 1) {
            startNum = startMaxNum1;
            direction = 2;
        }
        else
            startNum = startMinNum1;
    }
    else if (tabIndex == 2) {
        if (handle2 == 1) {
            startNum = startMaxNum3;
            direction = 2;
        } else {
            startNum = startMinNum2;
        }
    } else if (tabIndex == 3) {
        if (handle3 == 1) {
            startNum = startMaxNum3;
            direction = 2;
        }
        else
            startNum = startMinNum3;
    } else {
        if (handle4 == 1) {
            startNum = startMaxNum4;
            direction = 2;
        }
        else
            startNum = startMinNum4;
    }
    $.post('/order/GetOrderListByCondition', {
        keyWord: $.trim($("#txtSearch").val()), tabIndex: tabIndex, direction: direction, startNum: startNum
    }, function (data) {
        if (data != null) {
            if (direction == 2) {
                $("#pOrder" + tabIndex).html("");
            }
            if (data.Orders.length >= 1) {
                if (direction == 1) {
                    if (tabIndex == 1) {
                        if (startMaxNum1 == 0) {
                            startMaxNum1 = data.Orders[0].Id;
                        }
                        startMinNum1 = data.Orders[data.Orders.length - 1].Id;
                    } else if (tabIndex == 2) {
                        if (startMaxNum2 == 0) {
                            startMaxNum2 = data.Orders[0].Id;
                        }
                        startMinNum2 = data.Orders[data.Orders.length - 1].Id;
                    } else if (tabIndex == 3) {
                        if (startMaxNum3 == 0) {
                            startMaxNum3 = data.Orders[0].Id;
                        }
                        startMinNum3 = data.Orders[data.Orders.length - 1].Id;
                    } else if (tabIndex == 4) {
                        if (startMaxNum4 == 0) {
                            startMaxNum4 = data.Orders[0].Id;
                        }
                        startMinNum4 = data.Orders[data.Orders.length - 1].Id;
                    }
                } else {
                    if (tabIndex == 1) {
                        if (startMinNum1 == 0) {
                            startMinNum1 = data.Orders[data.Orders.length - 1].Id;
                        }
                        startMaxNum1 = data.Orders[0].Id;
                    } else if (tabIndex == 2) {
                        if (startMinNum2 == 0) {
                            startMinNum2 = data.Orders[data.Orders.length - 1].Id;
                        }
                        startMaxNum2 = data.Orders[0].Id;
                    } else if (tabIndex == 3) {
                        if (startMinNum3 == 0) {
                            startMinNum3 = data.Orders[data.Orders.length - 1].Id;
                        }
                        startMaxNum3 = data.Orders[0].Id;
                    } else if (tabIndex == 4) {
                        if (startMinNum4 == 0) {
                            startMinNum4 = data.Orders[data.Orders.length - 1].Id;
                        }
                        startMaxNum4 = data.Orders[0].Id;
                    }
                }
                $(data.Orders).each(function (i) {
                    var orderstrs = "<a href='/order/ordersdetail?orderid=" + data.Orders[i].Id + "' class='linkDetail'><p class='listBox'> <p class='orderHeader'><ul><li><img src='/images/list.png'></li><li>订单号:<span data-name='orderCode' class='orderCode'>" + data.Orders[i].OrderCode + "</span></li></ul><span class='orderTime' data-name='orderTime'>" + ToJavaScriptDate(data.Orders[i].OrderTime) + "</span></p>";
                    if (data.OrdersDetail.length >= 1) {
                        var details = Enumerable.From(data.OrdersDetail).Where("x=>x.OrderId==" + data.Orders[i].Id).ToArray();
                        if (details != null && details.length >= 1) {
                            orderstrs += "<p class='orderContent'>";
                            $(details).each(function (j) {
                                var img = "";
                                if (details[j].Images != null && details[j].Images != "") {
                                    img = details[j].Images.split(" ")[0];
                                }
                                orderstrs += "<p class='orderDetailBox'><img class='productImg' src='" + img + "'><span class='productName' data-name='productName'>" + details[j].ProductName + "</span><ul><li>¥<span class='unitPrice' data-name='unitPrice'>" + details[j].UnitPrice + "</li><li>×<span class='num' data-name='num'>" + details[j].Num + "</span></li></ul></p>";
                            });
                        }
                        orderstrs += "</p>";
                    }
                    orderstrs += "<p class='statis'><ul><li>共<span class='productCount' data-name='productCount'>" + data.Orders[i].ProductCount + "</span>件商品</li><li>合计:¥<span class='payAmount' data-name='payAmount'>" + data.Orders[i].PayAmount + "</span></li></ul></p></p></a>";
                    orderstrs += "<p class='handle'><button class='btn-default'>致电业务员</button><button class='btn-primary'>确认收货</button></p>";
                    $("#pOrder" + tabIndex).append(orderstrs);
                });
            }
            myScroll.refresh();
        }
    });
}

还有大神能帮忙内推一下么><

PHP中文网
PHP中文网

认证高级PHP讲师

Antworte allen(2)
阿神

大神们><帮帮忙

小葫芦

尝试在touchmove的时候调用blur函数

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage