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

熱AI工具

Undress AI Tool
免費脫衣圖片

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

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

Clothoff.io
AI脫衣器

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

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

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

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

Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具

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

熱門話題

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

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

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

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

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

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

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

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