設定html表單元素不可用的多種方法總結?

IT工程師在工作中常會遇到提交表單的情況,那麼當做編輯操作時,提交表單中往往會有一些內容是不允許再修改的,如編號等。怎麼設定這些HTML表單內容不能修改?我總結了下面一些方法。

設定html表單元素不可用的多種方法總結

方法/步驟

方法一:

將不允許修改的內容直接顯示,而不用輸入框input。

缺點:這種情況需要加入一個隱藏輸入框儲存不允許修改的元素,以保證提交後能獲得不允許修改的元素值。

設定html表單元素不可用的多種方法總結

設定html表單元素不可用的多種方法總結

方法二:

使用readonly。

缺點:使用readonly可以使輸入框只讀,不過這種有個缺點就是不明顯,看著和普通輸入框一樣,但無法修改,給使用者感覺不太好。

解決辦法:可以通過新增CSS方式來達到變灰的效果。

設定html表單元素不可用的多種方法總結

設定html表單元素不可用的多種方法總結

方法三:

使用disabled。

缺點:使用disabled可以使輸入框無法修改且顯示為灰色,使用者體驗較好,但有個很嚴重的問題就是使用它後無法再提交被禁用的元素值。

解決辦法:這種情況可以通過再放一個隱藏框或使用js等其他手段來彌補。

設定html表單元素不可用的多種方法總結

設定html表單元素不可用的多種方法總結

方法四:

使用SPAN與CSS。

缺點:使用span與css可以做到灰色不可編輯的效果,使用者體驗還不錯,但它也無法提交被禁用的元素值。

解決辦法:也需要通過再放一個隱藏框或使用js等其他手段來彌補。

設定html表單元素不可用的多種方法總結

設定html表單元素不可用的多種方法總結

方法五:

使用onfocus="this.blur()"。

缺點:這種是通過簡單的js使輸入框無法點選或修改,表面跟readonly效果一樣,但也有區別,就是readonly游標顯示,本方法不顯示游標。它的缺點也是不太明顯。

解決辦法:可以通過新增CSS方式來達到變灰的效果。

設定html表單元素不可用的多種方法總結

設定html表單元素不可用的多種方法總結

本人推薦 方法二方法五

下面附上所有測試程式碼截圖和效果圖:

設定html表單元素不可用的多種方法總結

設定html表單元素不可用的多種方法總結

情況, 內容, 元素, 表單,
相關問題答案