微信小程式中textarea與input的問(wèn)題總結(jié)
Oct 09, 2022 am 10:48 AM本篇文章為大家?guī)?lái)了關(guān)於微信小程式的相關(guān)知識(shí),其中主要介紹了關(guān)於小程式中textarea與input的問(wèn)題總結(jié),這兩個(gè)元件單獨(dú)只用一個(gè)時(shí),是沒(méi)有什麼問(wèn)題的,但是當(dāng)他們兩個(gè)一起出現(xiàn)時(shí),問(wèn)題就接踵而來(lái),下面一起來(lái)看一下,希望對(duì)大家有幫助。
【相關(guān)學(xué)習(xí)推薦:小程式學(xué)習(xí)教學(xué)】
微信小程式中,有兩個(gè)原生元件textarea和input ,這兩個(gè)組件單獨(dú)只用一個(gè)時(shí),是沒(méi)有什麼問(wèn)題的,但是當(dāng)他們兩個(gè)一起出現(xiàn)時(shí),問(wèn)題就接踵而來(lái),並且都是些很玄學(xué)的問(wèn)題,我在開(kāi)發(fā)時(shí)就遇到了這些玄學(xué)的問(wèn)題,一個(gè)簡(jiǎn)單的表單填寫(xiě)頁(yè)面,只是為了實(shí)現(xiàn)一個(gè)手動(dòng)實(shí)現(xiàn)頁(yè)面上推的功能,硬是搞了好幾天才弄好!
效果圖:
思考
#在我把這些玄學(xué)問(wèn)題透過(guò)特殊方式解決後,我思考了很多很多
為什麼textarea和input組合在一起使用時(shí)為什麼會(huì)有這些玄學(xué)問(wèn)題?
我明明是正常的寫(xiě)法,為什麼ios手機(jī)可以,到安卓機(jī)就不行了?
為什麼有些時(shí)候可以有些時(shí)候又不行?
...等等等等
為了以後不在這些問(wèn)題上走彎路,所以我決定好好的去探索一番,textarea與input的相愛(ài)相殺
測(cè)試機(jī)器
這次探索所用到的機(jī)器為
安卓機(jī)器:榮耀20,小米10s;
ios機(jī)器:iPhone13
#玄學(xué)問(wèn)題來(lái)了!
1、綁定bindkeyboardheightchange事件
問(wèn)題:只為textarea綁定bindkeyboardheightchange事件,input也會(huì)觸發(fā)textarea的bindkeyboardheightchange事件,並且觸發(fā)所攜帶的參數(shù)都是textarea上面的參數(shù)
機(jī)型:安卓必現(xiàn)
#範(fàn)例:
2、設(shè)定hold-keyboaed為true時(shí)
問(wèn)題:當(dāng)把textarea和input的hold-keyboaed屬性設(shè)為true時(shí),並且在input中有一個(gè)type不為text時(shí),連續(xù)切換會(huì)把鍵盤(pán)上方的完成卡住,並且不會(huì)再聚焦textarea機(jī)型:安卓必現(xiàn)範(fàn)例gif:3、textarea穿透問(wèn)題
#問(wèn)題:當(dāng)有fixed元素時(shí),無(wú)論設(shè)定多少z-index值,textarea元件都會(huì)穿透該fixed元素機(jī)型:安卓偶現(xiàn)玄學(xué)點(diǎn):有時(shí)是不會(huì)出現(xiàn)的,但當(dāng)我重新編譯、掃碼預(yù)覽時(shí),就會(huì)出現(xiàn)textarea穿透問(wèn)題,並且之後都會(huì)一直出現(xiàn),但當(dāng)我把小程式在手機(jī)上刪除後,重新編譯掃碼就有幾率不會(huì)出現(xiàn)該問(wèn)題範(fàn)例gif:4、綁定bindfocus事件
問(wèn)題:當(dāng)只給textarea綁定bindfocus事件,進(jìn)入頁(yè)面先點(diǎn)擊textarea後,再馬上點(diǎn)擊input會(huì)觸發(fā)textarea的focus事件機(jī)型:安卓偶現(xiàn)範(fàn)例gif:5、transition動(dòng)畫(huà)
問(wèn)題:在鍵盤(pán)抬起過(guò)程中如果透過(guò)bottom或translateY手動(dòng)抬起page頁(yè)面時(shí),並設(shè)定了transition動(dòng)畫(huà)屬性,會(huì)導(dǎo)致textarea的placeholder閃爍機(jī)型:安卓必現(xiàn)範(fàn)例gif:6、點(diǎn)擊完成時(shí)
問(wèn)題:textarea綁定bindkeyboardheightchange事件,並且使用了自帶的完成時(shí),點(diǎn)擊完成時(shí)不會(huì)觸發(fā)bindkeyboardheightchange事件
機(jī)型:安卓偶現(xiàn)
範(fàn)例gif:
解決方案:未找到解決方案
##7、設(shè)定auto-height時(shí)
問(wèn)題:當(dāng)textarea的auto-height屬性為true時(shí),會(huì)導(dǎo)致使用selectComponet取得高度時(shí)出現(xiàn)問(wèn)題,有時(shí)是沒(méi)有內(nèi)容的一排初始高度,有時(shí)是textarea的預(yù)設(shè)高度機(jī)型:ios與安卓解決方法:動(dòng)態(tài)控制auto-height的值,或使用定時(shí)器延遲取得高度8、鍵盤(pán)高度獲取不一致
問(wèn)題:多次觸發(fā)bindkeyboardchange事件,從事件中獲取的keyboardHeight高度不一致,有時(shí)是帶了完成的高度,有時(shí)是沒(méi)有帶完成的高度#機(jī)型:安卓偶現(xiàn)解決方法:未找到解決方法9、取得資料精確度問(wèn)題
問(wèn)題:透過(guò)selectComponet取得元素的高寬或位置時(shí),會(huì)預(yù)設(shè)保留全部小數(shù),大概為16位,有幾率導(dǎo)致動(dòng)畫(huà)出現(xiàn)混亂機(jī)型:ios與安卓偶現(xiàn)解決方法:js語(yǔ)言本身就有精確度問(wèn)題,所以透過(guò)selectComponent取得資料後,最好只保留兩位小數(shù)來(lái)進(jìn)行處【相關(guān)學(xué)習(xí)推薦:小程式學(xué)習(xí)教學(xué)】
以上是微信小程式中textarea與input的問(wèn)題總結(jié)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章!

熱AI工具

Undress AI Tool
免費(fèi)脫衣圖片

Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序,用於創(chuàng)建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門(mén)文章

熱工具

記事本++7.3.1
好用且免費(fèi)的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強(qiáng)大的PHP整合開(kāi)發(fā)環(huán)境

Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具

SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)

熱門(mén)話題

閒魚(yú)官方微信小程式悄悄上線,在小程式中可以發(fā)布閒置與買(mǎi)家/賣(mài)家私訊交流、查看個(gè)人資料及訂單、搜尋物品等,有用好奇閒魚(yú)微信小程式叫什麼,現(xiàn)在快來(lái)看一下。閒魚(yú)微信小程式叫什麼答案:閒魚(yú),閒置交易二手買(mǎi)賣(mài)估價(jià)回收。 1、在小程式中可以發(fā)布閒置、與買(mǎi)家/賣(mài)家私訊交流、查看個(gè)人資料及訂單、搜尋指定物品等功能;2、在小程式的頁(yè)面中有首頁(yè)、附近、發(fā)閒置、訊息、我的5項(xiàng)功能;3、想要使用的話必要要開(kāi)通微信支付才可以購(gòu)買(mǎi);

實(shí)現(xiàn)微信小程式中的圖片濾鏡效果隨著社群媒體應(yīng)用程式的流行,人們?cè)絹?lái)越喜歡在照片中應(yīng)用濾鏡效果,以增強(qiáng)照片的藝術(shù)效果和吸引力。在微信小程式中也可以實(shí)現(xiàn)圖片濾鏡效果,為使用者提供更多有趣和創(chuàng)意的照片編輯功能。本文將介紹如何在微信小程式中實(shí)現(xiàn)圖片濾鏡效果,並提供具體的程式碼範(fàn)例。首先,我們需要在微信小程式中使用canvas元件來(lái)載入和編輯圖片。 canvas元件可以在頁(yè)面

實(shí)現(xiàn)微信小程式中的下拉式選單效果,需要具體程式碼範(fàn)例隨著行動(dòng)互聯(lián)網(wǎng)的普及,微信小程式成為了網(wǎng)路開(kāi)發(fā)的重要一環(huán),越來(lái)越多的人開(kāi)始關(guān)注和使用微信小程式。微信小程式的開(kāi)發(fā)相比傳統(tǒng)的APP開(kāi)發(fā)更加簡(jiǎn)單快捷,但也需要掌握一定的開(kāi)發(fā)技巧。在微信小程式的開(kāi)發(fā)中,下拉式選單是一個(gè)常見(jiàn)的UI元件,實(shí)現(xiàn)了更好的使用者操作體驗(yàn)。本文將詳細(xì)介紹如何在微信小程式中實(shí)現(xiàn)下拉式選單效果,並提供具

閒魚(yú)官方微信小程式已經(jīng)悄悄上線,它為用戶(hù)提供了一個(gè)便捷的平臺(tái),讓你可以輕鬆地發(fā)布和交易閒置物品。在小程式中,你可以與買(mǎi)家或賣(mài)家進(jìn)行私訊交流,查看個(gè)人資料和訂單,以及搜尋你想要的物品。那麼閒魚(yú)在微信小程式中究竟叫什麼呢,這篇教學(xué)攻略將為您詳細(xì)介紹,想要了解的用戶(hù)們快來(lái)跟著本文繼續(xù)閱讀吧!閒魚(yú)微信小程式叫什麼答案:閒魚(yú),閒置交易二手買(mǎi)賣(mài)估價(jià)回收。 1、在小程式中可以發(fā)布閒置、與買(mǎi)家/賣(mài)家私訊交流、查看個(gè)人資料及訂單、搜尋指定物品等功能;2、在小程式的頁(yè)面中有首頁(yè)、附近、發(fā)閒置、訊息、我的5項(xiàng)功能;3、

微信小程式實(shí)現(xiàn)圖片上傳功能隨著行動(dòng)網(wǎng)路的發(fā)展,微信小程式已經(jīng)成為了人們生活中不可或缺的一部分。微信小程式不僅提供了豐富的應(yīng)用場(chǎng)景,還支援開(kāi)發(fā)者自訂功能,其中包括圖片上傳功能。本文將介紹如何在微信小程式中實(shí)作圖片上傳功能,並提供具體的程式碼範(fàn)例。一、前期準(zhǔn)備工作在開(kāi)始編寫(xiě)程式碼之前,我們需要先下載並安裝微信開(kāi)發(fā)者工具,並註冊(cè)成為微信開(kāi)發(fā)者。同時(shí),也需要了解微信

使用微信小程式實(shí)現(xiàn)輪播圖切換效果微信小程式是一種輕量級(jí)的應(yīng)用程序,具有簡(jiǎn)單、高效的開(kāi)發(fā)和使用特點(diǎn)。在微信小程式中,實(shí)作輪播圖切換效果是常見(jiàn)的需求。本文將介紹如何使用微信小程式實(shí)現(xiàn)輪播圖切換效果,並給出具體的程式碼範(fàn)例。首先,在微信小程式的頁(yè)面檔案中,新增一個(gè)輪播圖元件。例如,可以使用<swiper>標(biāo)籤來(lái)實(shí)現(xiàn)輪播圖的切換效果。在該組件中,可以透過(guò)b

實(shí)現(xiàn)微信小程式中的圖片旋轉(zhuǎn)效果,需要具體程式碼範(fàn)例微信小程式是一種輕量級(jí)的應(yīng)用程序,為用戶(hù)提供了豐富的功能和良好的用戶(hù)體驗(yàn)。在小程式中,開(kāi)發(fā)者可以利用各種元件和API來(lái)實(shí)現(xiàn)各種效果。其中,圖片旋轉(zhuǎn)效果是一種常見(jiàn)的動(dòng)畫(huà)效果,可以為小程式增添趣味性和視覺(jué)效果。在微信小程式中實(shí)作圖片旋轉(zhuǎn)效果,需要使用小程式提供的動(dòng)畫(huà)API。以下是一個(gè)具體的程式碼範(fàn)例,展示如何在小程

實(shí)作微信小程式中的滑動(dòng)刪除功能,需要具體程式碼範(fàn)例隨著微信小程式的流行,開(kāi)發(fā)者在開(kāi)發(fā)過(guò)程中經(jīng)常會(huì)遇到一些常見(jiàn)功能的實(shí)作問(wèn)題。其中,滑動(dòng)刪除功能是常見(jiàn)、常用的功能需求。本文將為大家詳細(xì)介紹如何在微信小程式中實(shí)現(xiàn)滑動(dòng)刪除功能,並給出具體的程式碼範(fàn)例。一、需求分析在微信小程式中,滑動(dòng)刪除功能的實(shí)作涉及以下要點(diǎn):列表展示:要顯示可滑動(dòng)刪除的列表,每個(gè)列表項(xiàng)目需要包
