转载

移动端知识点部分总结

最近写了些 hybird 应用嵌入的 web 页面,遇到的一些问题,稍稍的总结下:

IOS和安卓不同机型上默认line-height不一致

<p class="p1">测试1</p>
    <p class="p2">测试2</p>

    .p2 {
        font-size: 0.14rem;
        margin-top: 0.1rem;
    }

由于2种机型的默认 line-height 不一致,这和字体、浏览器的布局模型、操作系统的字体渲染引擎,因此遇到这种情况的时候会选择手动的设置 line-height 的值,然后再通过 margin 或者 padding 去控制2个 p 标签之间的间距。

.p2 {
        font-size: 0.14rem;
        margin-top: 0.12rem;
        height: 0.14rem;
        line-height: 0.14rem;
   }

IOS下Input元素focus后无法唤起键盘

有个需求就是一进入到页面,用户不做任何操作, input 标签就被获取焦点,同时键盘被呼出。

获取焦点很容易做到,直接通过调用原生的 focus() 事件就行了。但是不能直接唤起键盘。

这是我关于这个问题的描述: IOS下Input元素focus后无法唤起键盘

文档上说明的很清楚了。 nativekeyboardDisplayRequiresUserActiontrue 时。必须要通过用户点击屏幕去主动触发键盘的唤起。

这个时候有2种方案了:

  • 直接点击 input 标签,唤起键盘

  • 通过点击屏幕的其他区域,然后触发 inputfocus 事件,唤起键盘

这个时候我是选择的第二种方案:

进入页面后,给页面加一层 mask ,在 mask 绑定点击事件,通过这个点击事件去触发键盘的唤起.

let maskEle = document.querySelector('.mask'),
        inputEle = document.querySelector('.input');
        
    maskEle.addEventListener('click', () => {
        inputEle.focus()
        //然后隐藏maskEle
    });

安卓机下 4.x 的版本通过 inputfocus 事件可以直接唤起键盘,不过 5.0 后也需要用户去主动的唤起键盘.

滑动穿透

dialog 组件:

.dialog {
        position: fixed;
        z-index: 999;
    }

如果页面比较长,滑动页面的时候, dialog 组件不动,但是 dialog 下部的可能会滑动的页面会滑动.

我的处理方法就是在 dialogmask 上绑定:

document.querySelector('.dialog-mask').addEventListener('touchmove', e => e.preventDefault());

另外还可以通过主动设置底部元素的 overflow 属性来控制是否能滑动.

input标签监听input事件,输入中文的时候出现英文字母也会被输入的情况

let inputEle = document.querySelector('.input');
    
    //限制空白符的输入
    inputEle.addEventListener('input', (e) => {
        let target = e.target;
        
        target.value = target.value.replace(//s/g, '');
        
    });

这个时候输入中文的时候,英文字母也会被输入.

通过改变 input 监听事件的类型:

inputEle.addEventListener('keyup', (e) => {
        let target = e.target;
        
        target.value = target.value.replace(//s/g, '');
    })

这样就会避免输入中文的时候连带字母也被输入进去了。如果想要限制 input 标签输入的位数,尽量使用 inputmaxlength 属性.

不过在移动端, type="number"maxlength 不起作用。

这个时候可以使用 inputpattern 来达到这一效果

<input type="text" pattern="/d*" maxlength="11">

不过 pattern 这个属性在移动端,特别是安卓机下的支持度不是很好.( 查看兼容性请戳我 )

原文  https://segmentfault.com/a/1190000007839280
正文到此结束
Loading...