ionic4 做webapp ios下 input 等输入框键盘弹起在收回焦点错位问题 (赞、实用）

àì夳堔傛蜴生んèń 2022-09-12 01:00 218阅读 0赞

原文出处：  
[ionic4 做webapp ios下 input 等输入框 键盘弹起在收回 焦点错位问题\_黄正梦的博客-CSDN博客1. 用ion-input ion-textarea的情况下<ion-input (ionBlur)="onBlur()"></ion-input>onBlur() \{ if (this.platform.is('ios')) \{ // 处理微信浏览器ios输入框关闭时，无法正确缩回 true 顶部对齐 false 底部对齐 ...https://blog.csdn.net/qq\_20059455/article/details/88108660?utm\_medium=distribute.pc\_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-5.no\_search\_link&depth\_1-utm\_source=distribute.pc\_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-5.no\_search\_link1. 用ion-input ion-textarea的情况下<ion-input (ionBlur)="onBlur()"></ion-input>onBlur() \{ if (this.platform.is('ios')) \{ // 处理微信浏览器ios输入框关闭时，无法正确缩回 true 顶部对齐 false 底部对齐 ...![favicon32.ico][]https://blog.csdn.net/qq\_20059455/article/details/88108660?utm\_medium=distribute.pc\_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-5.no\_search\_link&depth\_1-utm\_source=distribute.pc\_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-5.no\_search\_link][ionic4 _webapp ios_ input _ _ _-CSDN_1. _ion-input ion-textarea_ion-input _ionBlur_onBlur_ion-input_onBlur_ _ if _this.platform.is_ios_ _ _ _ios_ true _ false _ ...https_blog.csdn.net_qq_20059455_article_details_88108660_utm_medium_distribute.pc_relevant.none-task-blog-2_7Edefault_7EBlogCommendFromBaidu_7Edefault-5.no_search_link_depth_1-utm_source_distribute.pc_relevant.none-task-blog-2_7Edefault_7EBlogCommendFromBaidu_7Edefault-5.no_search_link1. _ion-input ion-textarea_ion-input _ionBlur_onBlur_ion-input_onBlur_ _ if _this.platform.is_ios_ _ _ _ios_ true _ false _ ..._favicon32.ico_https_blog.csdn.net_qq_20059455_article_details_88108660_utm_medium_distribute.pc_relevant.none-task-blog-2_7Edefault_7EBlogCommendFromBaidu_7Edefault-5.no_search_link_depth_1-utm_source_distribute.pc_relevant.none-task-blog-2_7Edefault_7EBlogCommendFromBaidu_7Edefault-5.no_search_link]

1. 用ion-input ion-textarea的情况下

<ion-input (ionBlur)="onBlur()"></ion-input>  
onBlur() \{  
    if (this.platform.is('ios')) \{  
        // 处理微信浏览器ios输入框关闭时，无法正确缩回 true 顶部对齐 false 底部对齐  
        document.body.scrollIntoView(true);  
    \}  
\}

2.alertController有输入的情况下

this.alertController.create(\{  
    header: '提示',  
    inputs: \[\{name: 'OptionName', type: 'text', placeholder: '其他'\}\],  
    buttons: \[\{text: '取消'\}, \{  
        text: '确定', handler: (res) => \{  
        // 处理逻辑  
        \}  
    \}\]  
\}).then(alert => \{  
    alert.present().then(() => \{  
    // 这里用alert-input的class类名做判断 有点危险 可直接用input  
        const inputs = document.querySelectorAll('input.alert-input');  
        inputs.forEach(input => \{  
            input.addEventListener('blur', () => \{  
                document.body.scrollIntoView(true);  
            \});  
        \});  
    \});  
\});  
————————————————  
版权声明：本文为CSDN博主「llxhzm」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。  
原文链接：https://blog.csdn.net/qq\_20059455/article/details/88108660

[favicon32.ico]: /images/20220828/f5e91661b3df427fb30f88ee521857ca.png
[ionic4 _webapp ios_ input _ _ _-CSDN_1. _ion-input ion-textarea_ion-input _ionBlur_onBlur_ion-input_onBlur_ _ if _this.platform.is_ios_ _ _ _ios_ true _ false _ ...https_blog.csdn.net_qq_20059455_article_details_88108660_utm_medium_distribute.pc_relevant.none-task-blog-2_7Edefault_7EBlogCommendFromBaidu_7Edefault-5.no_search_link_depth_1-utm_source_distribute.pc_relevant.none-task-blog-2_7Edefault_7EBlogCommendFromBaidu_7Edefault-5.no_search_link1. _ion-input ion-textarea_ion-input _ionBlur_onBlur_ion-input_onBlur_ _ if _this.platform.is_ios_ _ _ _ios_ true _ false _ ..._favicon32.ico_https_blog.csdn.net_qq_20059455_article_details_88108660_utm_medium_distribute.pc_relevant.none-task-blog-2_7Edefault_7EBlogCommendFromBaidu_7Edefault-5.no_search_link_depth_1-utm_source_distribute.pc_relevant.none-task-blog-2_7Edefault_7EBlogCommendFromBaidu_7Edefault-5.no_search_link]: https://blog.csdn.net/qq_20059455/article/details/88108660?utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~default-5.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~default-5.no_search_link