jquery碎片知识积累

最新推荐文章于 2021-04-29 17:42:11 发布

冉冉啊

最新推荐文章于 2021-04-29 17:42:11 发布

阅读量139

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/weixin_38740565/article/details/103432900

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了移动端使用jQuery实现的三个实用技巧：1)如何限制iOS设备输入框只允许三位有效数字及小数点；2)如何禁止页面滚动；3)解决在iOS上输入内容后，文本框失焦时页面底部出现白色空白的问题。

摘要由CSDN通过智能技术生成

1.移动端限制三位有效数字和输入小数点

<input οninput=“this.value=this.value.replace(/\D*(\d*)(.?)(\d{0,3})\d*/,’$1$2$3’)” />

ios端限制ios三位有效数字和输入小数点：

<input pattern="[0-9].?[0-9]{0,3}"  />

2.禁止页面滚动

var bodyEl = document.body;
var top = 0;

/**
* 禁止页面滚动
*/
function fixed() {
    top = window.scrollY;
    bodyEl.style.position = 'fixed';
    bodyEl.style.top = -top + 'px';
}

/**
* 允许页面滚动
*/
function fixedNone() {
    bodyEl.style.position = '';
    bodyEl.style.top = '';
    window.scrollTo(0, top);
}

3.移动端输入内容会弹起键盘，文本框失去焦点时，ios页面底部会出现白色空白

仅针对移动端进行判断，pc端失去焦点时会出现页面闪烁

function getScrollTop() {
    var scrollTop = 0;
    if (document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop;
    } else if (document.body) {
        scrollTop = document.body.scrollTop;
    }
    return scrollTop;
};
var oldScrollTop = getScrollTop() || 0; // 记录当前滚动位置
document.body.addEventListener('focusin', () => {  //软键盘弹起事件
    // console.log("键盘弹起");
});
document.body.addEventListener('focusout', () => { //软键盘关闭事件
    // console.log("键盘收起");
    var ua = window.navigator.userAgent;
    if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPad') > 0) { //键盘收起页面空白问题
        document.body.scrollTop = oldScrollTop;
        document.documentElement.scrollTop = oldScrollTop;
    }
});
function judgeClient() {
    let u = navigator.userAgent;
    let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;  //判断是否是 android终端
    let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);    //判断是否是 iOS终端
    if (isAndroid) {
        $("body").find("input[type='file']").attr("capture", "camera");
    } else if (isIOS) {
        $("body").find("input[type='file']").removeAttr("capture");
    }
}
judgeClient()