转载

移动端知识点部分总结

最近写了些 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后无法唤起键盘

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

这个时候有2种方案了：

直接点击 input 标签，唤起键盘
通过点击屏幕的其他区域，然后触发 input 的 focus 事件,唤起键盘

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

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

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

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

滑动穿透

dialog 组件:

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

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

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

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 标签输入的位数，尽量使用 input 的 maxlength 属性.

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

这个时候可以使用 input 的 pattern 来达到这一效果

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

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

原文 https://segmentfault.com/a/1190000007839280

正文到此结束

所属分类：编程技术

本文标签： UI 操作系统 tar list IO value Action https key IOS 测试 Select ACE web Document http CTO ask 需求总结
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

移动端知识点部分总结

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

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

滑动穿透

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

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流