转载

移动端知识点部分总结

最近写了些 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

正文到此结束

所属分类：编程技术

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

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

移动端知识点部分总结

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

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

滑动穿透

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

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流