偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

通過(guò)focusout事件解決IOS鍵盤收起時(shí)界面不歸位的問(wèn)題

開發(fā) 前端
今天在開發(fā)一個(gè)移動(dòng)端的 H5 頁(yè)面時(shí),遇到了 IOS 上鍵盤收起時(shí)界面無(wú)法歸位的問(wèn)題。下面詳細(xì)描述下問(wèn)題和癥狀。

問(wèn)題癥狀

今天在開發(fā)一個(gè)移動(dòng)端的 H5 頁(yè)面時(shí),遇到了 IOS 上鍵盤收起時(shí)界面無(wú)法歸位的問(wèn)題。下面詳細(xì)描述下問(wèn)題和癥狀:

頁(yè)面結(jié)構(gòu)

出問(wèn)題的頁(yè)面是一個(gè)表單結(jié)構(gòu)。即類似于一個(gè) div 下有4個(gè) input 表單的結(jié)構(gòu),用于用戶填寫郵寄信息。類似:

  1. <div>  
  2.     <input type="text" placeholder="請(qǐng)?zhí)顚懯∈锌h" />  
  3.     <input type="text" placeholder="請(qǐng)?zhí)顚懙刂?quot; />  
  4.     <input type="text" placeholder="請(qǐng)?zhí)顚懶彰?quot; />  
  5.     <input type="text" placeholder="請(qǐng)?zhí)顚懧?lián)系電話" />  
  6. </div> 

截圖如下:

鍵盤彈起時(shí)頁(yè)面自動(dòng)上移

當(dāng)用戶在手機(jī)上輸入聯(lián)系電話時(shí),iPhone鍵盤會(huì)彈出,此時(shí)iPhone上為了讓用戶可以看到電話輸入框,會(huì)將整個(gè)頁(yè)面整體向上移動(dòng)(不然鍵盤會(huì)遮住電話輸入框)。此時(shí),實(shí)際上頁(yè)面頂部是離開了我們的視口一部分距離的(我們看到界面中消失了一行輸入框)。

鍵盤收起時(shí)頁(yè)面無(wú)法還原歸位

然而當(dāng)用戶輸入完成關(guān)閉鍵盤后,鍵盤雖然收起了,但頁(yè)面位置卻不會(huì)還原。

問(wèn)題分析

實(shí)際上這是由于 IOS 無(wú)法在鍵盤收起時(shí),頁(yè)面滾出視口的部分沒(méi)有掉下來(lái)導(dǎo)致的。這時(shí)用戶是可以通過(guò)手指將頁(yè)面拖回來(lái)的。

但是畢竟體驗(yàn)不好。

要解決這個(gè)問(wèn)題,我們可以在用戶光標(biāo)離開輸入框的時(shí)候,調(diào)用 window.scrollTo(0, 0) 來(lái)把頁(yè)面滾動(dòng)到跟視口頂部對(duì)齊,從而實(shí)現(xiàn)頁(yè)面歸位的效果。

那么現(xiàn)在問(wèn)題就是要給表單中 4 個(gè)輸入框全部加上 blur 事件,然后在 handler 中調(diào)用 window.scrollTo。不過(guò),無(wú)論是通過(guò) Vue 的 @blur 還是通過(guò) DOM 操作的方式添加,都要添加4個(gè)事件監(jiān)聽,不是很優(yōu)雅。很自然,我們想到用事件代理。

事件代理

即,我們把事件監(jiān)聽放到頂部元素上;然后定義一個(gè) inputBlur 的函數(shù)等待觸發(fā)。 

  1. <div @blur="inputBlur">  
  2.     <input type="text" placeholder="請(qǐng)?zhí)顚懯∈锌h" />  
  3.     <input type="text" placeholder="請(qǐng)?zhí)顚懙刂?quot; />  
  4.     <input type="text" placeholder="請(qǐng)?zhí)顚懶彰?quot; />  
  5.     <input type="text" placeholder="請(qǐng)?zhí)顚懧?lián)系電話" />  
  6. </div> 

結(jié)果,發(fā)現(xiàn)我們的事件監(jiān)聽器無(wú)法觸發(fā)。原因經(jīng)查是輸入框的 blur 事件無(wú)法冒泡。

無(wú)法冒泡的解決方案

經(jīng)過(guò)查詢,發(fā)現(xiàn) focus 和 blur 兩個(gè) DOM 事件在規(guī)范中就是無(wú)法冒泡的。而與之相類似的有另外 2 個(gè)事件 focusin 和 focusout 則是可以冒泡的。

網(wǎng)上一些文章提到 focusin 和 focusout 是 IE 瀏覽器才支持的一種 DOM 事件。而實(shí)際上我們看 MDN 文檔發(fā)現(xiàn),這兩個(gè)事件已經(jīng)成為 DOM 3 規(guī)范的一個(gè)標(biāo)準(zhǔn),而且可支持的瀏覽器數(shù)量并不少。

所以,果斷通過(guò)這兩個(gè)事件解決問(wèn)題,我們改成 focusout。

  1. <div @focusout="inputBlur">  
  2.     <input type="text" placeholder="請(qǐng)?zhí)顚懯∈锌h" />  
  3.     <input type="text" placeholder="請(qǐng)?zhí)顚懙刂?quot; />  
  4.     <input type="text" placeholder="請(qǐng)?zhí)顚懶彰?quot; />  
  5.     <input type="text" placeholder="請(qǐng)?zhí)顚懧?lián)系電話" />  
  6. </div> 

然后,實(shí)現(xiàn)我們的事件處理器:     

  1. inputBlur(e) {  
  2.       // 首先,判斷觸發(fā)事件的目標(biāo)元素是否是input輸入框,我們只關(guān)注輸入框的行為。  
  3.           if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input') {  
  4.               window.scrollTo(0,0);  
  5.           }  
  6.       }, 

這時(shí),我們問(wèn)題得到解決了,當(dāng)從輸入框輸入內(nèi)容,然后點(diǎn)擊鍵盤的完成收起鍵盤,效果符合我們的預(yù)期。

但是經(jīng)過(guò)手機(jī)測(cè)試發(fā)現(xiàn),當(dāng)我們從 電話輸入框 直接切換到 姓名輸入框 這種操作時(shí),頁(yè)面會(huì)發(fā)生抖動(dòng)。我們來(lái)繼續(xù)分析。

解決抖動(dòng)問(wèn)題

其實(shí)2個(gè)輸入框切換時(shí) 抖動(dòng)的原因也很簡(jiǎn)單。因?yàn)槲覀冊(cè)谏鲜鰞蓚€(gè)輸入框之間切換時(shí),頁(yè)面會(huì)首先觸發(fā) 電話輸入框 的 blur 事件,接著觸發(fā) 姓名輸入框 的 focus 事件。這樣的話,在 blur 時(shí)會(huì)觸發(fā)我們的 window.scrollTo(0,0) 導(dǎo)致頁(yè)面往下滾一下,接著 姓名輸入框 聚焦,于是鍵盤繼續(xù)彈起---這導(dǎo)致頁(yè)面再次向上移動(dòng)。

其實(shí),在兩個(gè)輸入框之間切換這種操作時(shí),我們就沒(méi)必要觸發(fā)***個(gè)輸入框 blur 時(shí)的 window.scrollTo 行為了。 因此看我們修改下我們的代碼,讓輸入框切換這種操作發(fā)生時(shí),可以切斷***個(gè)輸入框的行為。這里我們用 setTimeout 來(lái)解決: 

  1. <div @focusout="inputBlur" @focusin="inputFocus">  
  2.     <input type="text" placeholder="請(qǐng)?zhí)顚懯∈锌h" />  
  3.     <input type="text" placeholder="請(qǐng)?zhí)顚懙刂?quot; />  
  4.     <input type="text" placeholder="請(qǐng)?zhí)顚懶彰?quot; />  
  5.     <input type="text" placeholder="請(qǐng)?zhí)顚懧?lián)系電話" />  
  6. </div>      
  1. inputBlur(e) {  
  2.           // 首先,判斷觸發(fā)事件的目標(biāo)元素是否是input輸入框,我們只關(guān)注輸入框的行為。  
  3.           if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input') {  
  4.               // 輸入框失去焦點(diǎn),要把IOS鍵盤推出頁(yè)面的滾動(dòng)部分還原。即將頁(yè)面滾動(dòng)到視窗頂部對(duì)齊  
  5.               console.log('設(shè)置timer')  
  6.               this.timer = setTimeout(() => {  
  7.                   console.log('timer觸發(fā)')  
  8.                   window.scrollTo(0,0);  
  9.               }, 0)  
  10.           }  
  11.       },     
  12.       inputFocus(e) {  
  13.            // 如果focus,則移除上一個(gè)輸入框的timer  
  14.           if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input') {  
  15.               clearTimeout(this.timer);  
  16.           }  
  17.       } 
責(zé)任編輯:龐桂玉 來(lái)源: segmentfault
相關(guān)推薦

2015-07-08 16:46:05

iOS鍵盤

2009-12-24 14:53:51

單線接入

2010-07-29 10:33:59

Flex鍵盤事件

2022-08-27 15:15:31

iOS耗電后臺(tái)

2023-12-13 18:46:51

Docker容器進(jìn)程

2024-09-18 15:50:59

Docker容器日志

2019-07-19 08:36:45

開發(fā)技能SpringBoot

2019-04-22 12:25:40

UbuntuLinux IP地址

2022-08-05 11:55:13

FlutteriOS

2011-07-20 09:58:33

DevOps

2010-04-07 11:00:55

網(wǎng)絡(luò)基線網(wǎng)絡(luò)故障

2011-08-19 14:03:34

IOS開發(fā)NSDATANSSTRING

2010-07-29 10:27:30

Flex鍵盤事件

2017-08-24 13:44:28

牛頓法Logistic回歸Python

2015-03-12 10:33:47

Javascript兼容性解決

2012-11-30 14:19:08

黑莓忘記物理鍵盤

2016-11-10 14:28:16

雙十一阿里網(wǎng)購(gòu)

2009-12-30 14:36:29

Silverlight

2009-12-28 14:15:06

ADO連接

2011-07-19 12:53:37

MySQLNPTL
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)