javascript - 移动端如何点击屏幕以及滑动的时候取消输入框的焦点
PHP中文网
PHP中文网 2017-04-11 12:49:57
[JavaScript讨论组]

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

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

  • 订单号:" + data.Orders[i].OrderCode + "
" + ToJavaScriptDate(data.Orders[i].OrderTime) + "

"; 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 += "

"; $(details).each(function (j) { var img = ""; if (details[j].Images != null && details[j].Images != "") { img = details[j].Images.split(" ")[0]; } orderstrs += "

" + details[j].ProductName + "

  • " + details[j].UnitPrice + "
  • ×" + details[j].Num + "

"; }); } orderstrs += "

"; } orderstrs += "

  • " + data.Orders[i].ProductCount + "件商品
  • 合计:¥" + data.Orders[i].PayAmount + "

"; orderstrs += "

"; $("#pOrder" + tabIndex).append(orderstrs); }); } myScroll.refresh(); } }); }

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

PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(2)
阿神

大神们><帮帮忙

高洛峰

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号