中国联通网站备案,网页设计与制作教程第2版,wordpress文章页宽度,江宁网站建设价位问题描述#xff1a;
前提#xff1a;我使用的是vant组件库#xff0c;其中一个页面中有一个van-popup组件#xff0c;van-popup组件中又嵌套了一个van-field组件预期结果#xff1a;当点击van-feild输入框时#xff0c;键盘弹起#xff0c;输入框显示在键盘上方实际结…问题描述
前提我使用的是vant组件库其中一个页面中有一个van-popup组件van-popup组件中又嵌套了一个van-field组件预期结果当点击van-feild输入框时键盘弹起输入框显示在键盘上方实际结果当van-popup打开时首次点击van-field时键盘将van-popup遮挡导致输入框中内容不可见。失去焦点再次点击后van-popup被顶起。如果关闭van-popup则会重复前面的情况
下方视频可以看看直观效果 键盘遮挡输入框 问题分析与尝试过程
1. 之前遇到过类似的问题当时是由于popup的高度导致的修改高度就解决了 所以刚开始我也以为是高度的问题发现调整了van-popup的高度并没有什么效果 2. 试了安卓手机发现安卓上没有问题 由此可见是ios特有 3. 查看是否是vant组件库的问题看了github issues发现类似问题 但是issue只发生在了ios13上我手中的ios16还是存在该问题也用了上面提供的各个方法没有解决 4. 又看到了有人用van-popup的get-container属性解决了挂载在body或者#app下我尝试了以后发现测试机器8plus确实ok了但是我手里的13pro变成偶现了 5. 焦急万分的我google一大堆有使用scrollIntoView进行滚动的还有监听resize手动滚动的针对我的问题都没能解决 6. 最后看到了参考文档1中的方式发现无论在我的手机上还是低版本的ios上都没有再出现该问题到这里我以为是大功告成了认为此bug已修复
以上步骤都是2024.12.10日当天经历的下面也就是今天2024.12.12日经历的 7. 测试提了个bug说输入框无法左右移动光标了我十分天真地觉得这个光标是可以有原生方法设置的不错确实有设置光标位置的但是只是设置固定的位置而我在6的方法中是阻止了默认行为导致长按无法根据手指方向移动光标了但是我依旧没死心啊又问了各大ai结果ai给的回答都是修改解决遮挡问题的办法又回到了之前 8. 我让ai给我分析为什么我使用的办法会让光标无法移动它说因为阻止了默认行为我有说我只有第一次这样能不能在这个方法的基础上得到解决它终于给出了一个用的上的方式那就是只有在首次点击的时候才阻止默认行为 9. 我回想到两天前解决的时候发现在van-popup父组件中用v-if来控制van-popup的显示时被遮挡的概率将会大大降低再结合今天看了很多ios处理软件盘的流程的文档后我找到了更简单的方法就是在父组件中就用v-if控制van-popup显示而van-popup中控制显示的属性将一直为true至此我得到了两种解决方式这一种在我自己看了最简单
解决方法
方案一给van-feild添加touchstart.native事件
templatevan-popuppositionbottomclasspopupget-container#app:valueshow:overlay-style{ background: rgba(0,0,0,0.5) }:close-on-click-overlayfalsevan-field reffieldRef classfield typeemail maxlength100 clearable v-modelemail placeholder请输入邮箱 touchstart.nativeonInputTouch//van-popup
/templatescript
import { Popup, Loading, Toast, Field } from vant;export default {components: {[Popup.name]: Popup,[Loading.name]: Loading,[Field.name]: Field,},props: {show: {type: Boolean,default: false}},data() {return {email: ,isFocused: false}},watch: {show: {handler(val) {if(val this.isFocused) {this.isFocused false;}},immediate: true}},methods: {onInputTouch(e) {if (!this.isFocused) {e.preventDefault();e.target.focus();this.isFocused true;return;}this.isFocused true;}}
};
/script方案二(最终使用)用v-if控制van-popup的显示van-popup本身的show属性默认设置为true 参考文档
1. van-popup 在ios手机上被键盘遮盖问题使用该方法解决了遮挡但是光标无法左右移动 2. 不如刷新认识移动端软键盘出现带来的网页问题详细介绍了ios软键盘引发问题的原因 3. 别再用不规范的方法来解决软键盘遮挡输入框问题了 4. Keyboard Management说明了ios webkit如何处理键盘事件和视图布局 5. Handling the Virtual Keyboard详细说明了ios safari中虚拟键盘的行为
