form表單無法提交input disabled內容

現象描述: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屬性。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章