現象描述:form表單提交內容是,無法提交設置爲disabled的input輸入框;
業務場景:用戶輸入手機號獲得驗證碼,倒計時期間手機號不能修改;
解決方法:設置input的屬性值爲用readonly代替;
原因分析:
1、readonly和disabled的區別
readonly:針對input(text / password)和textarea有效,在設置爲true的情況下,用戶可以獲得焦點,但是不能編輯,在提交表單時,輸入項會作爲form的內容提交。
disabled:針對所有表單元素(select,button,input,textarea等),在設置爲disabled爲true的情況下,表單輸入項不能獲得焦點,用戶的所有操作無意義,在提交表單時,表單輸入項不會被提交。
技術總結:
1、如果在某個表單中爲用戶不允許用戶修改,但是在提交表單時傳遞值,應該設置爲表單屬性爲readonly。
2、disabled和readonly的文本輸入框只能通過腳本進行修改value屬性。
標準規範:
W3C的規範:http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.12;
設置爲disabled的input將會有下面的限制:
- 不能接收焦點
- 使用tab鍵時將被跳過
- 可能不是successful的
設置爲readonly的input將會有下面的限制:
- 可以接收焦點但不能被修改
- 可以使用tab鍵進行導航
- 可能是successful的
只有successful的表單元素纔是有效數據,也即是可以進行提交。disabled和readonly的文本輸入框只能通過腳本進行修改value屬性。