input坑点简记

1.现象:文本输入框,包括input、textarea的隐藏方式,使用样式opacity: 0,用户如果误触到该区域,会弹出键盘,且输入文本有效,只是不可见而已,机缘巧合下,导致提交表单出现问题。

解决方案:直接不显示或者使用display: none替代原有的opacity

2.场景:我们的交互中会有弹出框里的输入框获取焦点,弹出键盘的需求

坑点:当input渲染时defaultValue 或value有值时,进行focus,光标会出现在value前面

解决方案:先focus然后再给input赋值,建议使用this.theinput.value 来赋值

注意点:如果是用react 的 state来给input赋值,弹框弹出之后,focus,再setState,如果是一个相同的state,那么调用render生成dom树,进行react-diff算法,两棵dom树一样,就不会进行重新渲染,实际上没有再重新设置input的值,那么这种情况聚焦下光标依然会出现在value前面

3.现象:iOS弹窗遮罩,底部跟随滚动情况下,如果弹窗有input,大概导致光标漂移

解决方案:1.弹出层元素添加onTouchMove事件,调用e.preventDefault()方法。2.body 使用绝对布局并铺满一屏(0 0 0 0),页面内容在 body 内部滚动;

你可能感兴趣的:(input坑点简记)