最近写了些 hybird
应用嵌入的 web
页面,遇到的一些问题,稍稍的总结下:
<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; }
有个需求就是一进入到页面,用户不做任何操作, 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
属性来控制是否能滑动.
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
这个属性在移动端,特别是安卓机下的支持度不是很好.( 查看兼容性请戳我
)