現象
表單不可編輯狀態-ios的input的屬性設置為disabled,會造成字體顏色變灰
需求
移動端,瀏覽個人信息頁時,表單內的信息希望是不可編輯不可點狀態(readonly屬性會另外出現光標)
當點擊編輯按鈕進入可編輯狀態后,姓名和崗位變為可編輯狀態,手機仍舊是不可編輯不可點狀態
問題描述
對不可編輯不可點的設置,input定義disabled屬性
在ios上會出現截圖所示,設置的value的值幾乎看不見
解決辦法
1.解決的辦法是不用disabled,用readonly屬性(readonly屬性會額外出現光標,另行處理)
2.解決辦法,設置字體顏色,并對透明度設置為1??
? #判斷使用disabled屬性時,優先選擇
①設置顏色:
color改變disabled下的字體顏色,text-fill-color用來做填充色使用,如果有設置這個值,則color屬性將不生效。? 解決ios的value值顏色(詳情見修改顏色需要同時利用兩個屬性)
input:disabled, input[disabled]{ color:#8d9399;-webkit-text-fill-color:#8d9399;}
https://www.w3cways.com/1418.html
②設置透明度:
ios默認了disabled屬性時透明度為0.3
input:disabled, input[disabled]{ -webkit-opacity:1; opacity: 1; }
http://blog.csdn.net/qq_33008701/article/details/55259734
https://segmentfault.com/q/1010000003782696
同時對比disabled 和readonly屬性:
disabled 屬性規定禁用 input 元素。被禁用的 input 元素既不可用,也不可點擊。
readonly屬性readonly 屬性為只讀,但沒有禁用,通過表單提交。
擁有disabled屬性的表單元素處理頁面是獲取不到其值的,而readonly則可以
Readonly作用范圍:只針對input(text / password)和textarea有效
disabled作用范圍:對于所有的表單元素都有效,包括select, radio, checkbox, button
具體區別:http://blog.csdn.net/u011487470/article/details/51371567