移動端開發遇到的問題之 表單

2022-03-14 20:28:29 字數 1468 閱讀 7090

首次開發移動端,遇到的問題多多。

一、表單樣式問題

問題一:輸入框要求游標是紅色,ios的就是改不了游標顏色。後來查了下說由於ios系統原因,改不了輸入游標的顏色,這個最後也妥協了,專案時間趕不上了。下次再做表單,堅決自己寫所有樣式,表單的元素都隱藏,用其它元素模擬,因為不只是輸入游標有問題

問題二:輸入框和按鈕預設都是圓角,這個還好解決,設定border-radius: 0就可以了,但是按鈕的圓角沒有解決。。。

問題三:提交按鈕的預設樣式(圓角)怎麼也去不掉,顏色顯示一直不對。怎麼對它樣式重置後來在網上查到ios按鈕的重置要使用

input[type="submit"],

input[type="reset"],

input[type="button"],

但是顏色還是顯示不對,實在折騰不出來了,把表單的提交按鈕改成了div取去實現,其實不想改,想html規範點用,因為前面輸入框什麼的都是用的表單元素,就想統一一點,強迫症啊!!!但是從另乙個方面來說,遇到問題確實需要點靈活性,這次我就忍了吧,還是那句話,遇到表單再也不要用表單元素去做樣式,全部隱藏用其它元素模擬。

二、表單提交問題

(1)使用者頭像預覽問題

<

img

class

="head-img none"

id="head_img"

>

<

input

type

="file"

name

="header_img"

id="header_img"

class

="head-inp"

form

="data_form"

>

這裡把和按鈕做得完全一樣,其實它們外面還有個容器,因為img無src時不隱藏它就會有邊框,這個是去不掉的,只有隱藏。然後表單也是設定成透明的,所以就在容器元素上設定了乙個背景讓使用者知道在**點選上傳頭像。

第一次點選上傳,perfect。

但是我想替換頭像,再點選上傳,預覽的時候就出問題了

原因查到了,是這個img的class名字串最後乙個字母不知道為什麼不見了,導致樣式解析出錯。現在也還不知道為什麼,網上各種搜也沒有搜到類似的現象,有大神遇到過或者知道原因的麻煩解釋一下,自己想了個很簡陋的解決辦法——在預覽時重寫這個img的class名。

(3)用formdata物件提交表單資料

(4)表單的驗證樣式

由於瀏覽器不同,表單驗證提示的樣式也不統一,而且一般情況下產品都會修改表單驗證的提示樣式,所以不會用上htlm5中的各種現成的樣式,還是老老實實的寫驗證的**吧,當然一些可以利用的限制條件還是可以用的。

移動端遇到的問題

1 ios中當元素存在overflow auto的時候 且position fixed的時候 裡面的元素無法超出所設定的原始範圍 2 當滾動的內容有巢狀的時候,裡面的內容不需要加滾動屬性 3 呼叫手機相簿 相機介面 呼叫 照相機 呼叫攝像機 呼叫錄音 呼叫相機 或者相簿 呼叫相簿 vue中如果想在乙...

移動端常遇到的問題

時間控制項開啟時,會呼叫到手機鍵盤 解決方案,監聽focus事件,當觸發時,執行this.blur 原生js獲取元素高度 box 獲取盒子的內容高度,內容高度也可用用box.clientheight獲取,內容高度不包括邊框和外邊距和滾動條 var box document.getelementbyi...

開發form表單遇到的問題

1.多選選項出不來 多選框解決方法 繫結的必須是陣列 2.error in v on handler typeerror self.refs.formregdata.validatefield is not a function 這個formregdata 後面必須加 0 self.refs.for...