成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

表單中readonly的input等標(biāo)簽,禁止光標(biāo)進(jìn)入(focus)的幾種方式

Lowky / 3617人閱讀

摘要:需求及問題描述在做移動(dòng)端頁(yè)面,需要在訂單頁(yè)面中顯示表單數(shù)據(jù),由于統(tǒng)一,所以就依舊采用的結(jié)構(gòu)來寫結(jié)構(gòu),只讀數(shù)據(jù)的標(biāo)簽自然要加,以為這樣就行了。測(cè)試中模擬移動(dòng)端是看不出問題的。除此之外都表現(xiàn)完美,就我目前需求來看,也不需要什么事件。

需求及問題描述

在做移動(dòng)端頁(yè)面,需要在訂單頁(yè)面中顯示表單數(shù)據(jù),由于UI統(tǒng)一,所以就依舊采用form的結(jié)構(gòu)來寫結(jié)構(gòu),只讀數(shù)據(jù)的標(biāo)簽自然要加readonly=”readonly”,以為這樣就行了。
測(cè)試中Chrome模擬移動(dòng)端是看不出問題的。然而iOS手機(jī)上一看,雖然表單元素不能編輯內(nèi)容,但是會(huì)出現(xiàn)閃動(dòng)的光標(biāo)以及頁(yè)面底部有一條系統(tǒng)自帶的控制bar(安卓的沒有測(cè)試,我猜想也有問題吧?)。如下圖:

這種情況對(duì)我來說并不好。于是網(wǎng)上找了一些解決方案,現(xiàn)在總結(jié)如下:

方案一(JS):

這個(gè)很好理解就是進(jìn)入的時(shí)候自動(dòng)跳出。但是缺點(diǎn)是一方面js處理沒有css好,二是如果需要在該元素上綁定其他事件,其他人開發(fā)不留意可能會(huì)造成事件覆蓋。

方案二(CSS):
[readonly="readonly"] {
  user-select: none;
}

這是個(gè)新的實(shí)驗(yàn)性屬性,具體說明及兼容性可參考user-select MDN
用起來感覺很好,但是同樣有兩個(gè)問題:一,非標(biāo)準(zhǔn)屬性(請(qǐng)盡量不要在生產(chǎn)環(huán)境中使用它!);二,如果用戶想要復(fù)制該表單內(nèi)容就不行了,這個(gè)問題個(gè)人感覺很嚴(yán)重!

方案三(CSS):
[readonly="readonly"] {
  pointer-events: none;
}

這個(gè)是我感覺比較適合我的,因此最后我采納了該方案,當(dāng)然也是有弊端的,綁定在只讀表單元素的所有事件將無法生效。除此之外都表現(xiàn)完美,就我目前需求來看,也不需要什么事件。因此采用了~

當(dāng)然,如果你也遇到相似的問題,可以根據(jù)情況選擇對(duì)應(yīng)的方案,當(dāng)然,如果你也有更好的方法也歡迎留言~

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/116643.html

相關(guān)文章

  • 你不知道CSS(三)

    摘要:本文首發(fā)于我的博客在前面兩篇文章你不知道的一和你不知道的二中大致介紹了一些方面比較隱晦的但又很實(shí)用的技巧。系列文章你不知道的一你不知道的二本文首發(fā)于我的博客 本文首發(fā)于我的博客 在前面兩篇文章《你不知道的CSS(一)》和《你不知道的CSS(二)》中大致介紹了一些CSS方面比較隱晦的但又很實(shí)用的技巧。相信這些技巧會(huì)為大家在項(xiàng)目實(shí)踐中帶來一定的幫助,本文作為《你不知道的CSS》系列的第三篇...

    xiangzhihong 評(píng)論0 收藏0
  • 原生JS實(shí)現(xiàn)粘貼到剪貼板

    摘要:綜上加兩行如果不是等表單元素,不能使用和的話,那么我們可以使用和方法來模擬這個(gè)過程了,對(duì)象表示用戶選擇的文本范圍或光標(biāo)的當(dāng)前位置,滿足執(zhí)行命令的可編輯活動(dòng)區(qū)域,如下上述針對(duì)非,等表單元素也能實(shí)現(xiàn)了 本文主要討論原生方法 目前常見的實(shí)現(xiàn)粘貼到剪貼板主要有以下兩種方法: 第三方庫(kù) clipboard 原生JS, 主要是 document.execCommand方法 第一種方法按照文檔...

    Pikachu 評(píng)論0 收藏0
  • css選擇器總結(jié)

    摘要:偽類選擇器之動(dòng)態(tài)偽類序號(hào)選擇器名稱說明版本動(dòng)態(tài)偽類選擇器未被訪問時(shí)動(dòng)態(tài)偽類選擇器已被訪問時(shí)動(dòng)態(tài)偽類選擇器鼠標(biāo)以上時(shí)動(dòng)態(tài)偽類選擇器訪問中跳轉(zhuǎn)頁(yè)面時(shí)動(dòng)態(tài)偽類選擇器獲得焦點(diǎn)時(shí)是有順序的,其他順序可能無效,這是個(gè)坑。 1. 基本選擇器 序號(hào) 選擇器 名稱 說明 css版本 1 * 通用選擇器 選擇所有元素,包括html和body 2 2 div,span 標(biāo)簽選擇器 根據(jù)標(biāo)簽選擇...

    DirtyMind 評(píng)論0 收藏0
  • 構(gòu)建一個(gè)自定義 angular2 輸入組件

    摘要:構(gòu)建一個(gè)自定義輸入組件今天我們來學(xué)習(xí)如何正確的構(gòu)建和一個(gè)具有和同樣作用,但同時(shí)也具有自己的邏輯的輸入組件。值訪問器在完成上面的一些步驟之后,我們的組件基本功能完成了,但是接下來還有最重要的一部分內(nèi)容,那就是讓我們的自定義組件獲得值訪問權(quán)限。 構(gòu)建一個(gè)自定義 angular2 輸入組件 今天我們來學(xué)習(xí)如何正確的構(gòu)建和一個(gè)具有和 同樣作用,但同時(shí)也具有自己的邏輯的輸入組件。 在讀這篇文章...

    CNZPH 評(píng)論0 收藏0
  • 構(gòu)建一個(gè)自定義 angular2 輸入組件

    摘要:構(gòu)建一個(gè)自定義輸入組件今天我們來學(xué)習(xí)如何正確的構(gòu)建和一個(gè)具有和同樣作用,但同時(shí)也具有自己的邏輯的輸入組件。值訪問器在完成上面的一些步驟之后,我們的組件基本功能完成了,但是接下來還有最重要的一部分內(nèi)容,那就是讓我們的自定義組件獲得值訪問權(quán)限。 構(gòu)建一個(gè)自定義 angular2 輸入組件 今天我們來學(xué)習(xí)如何正確的構(gòu)建和一個(gè)具有和 同樣作用,但同時(shí)也具有自己的邏輯的輸入組件。 在讀這篇文章...

    pekonchan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<