這是網友在討論區問到的問題, 希望能將某些表單 (Form) 的文字輸入項設定為唯讀屬性, 讓使用者無法修改, 譬如講, 在一個購物清單中顯示出價格, 數量, ..., 你一定不希望使用者可以任意的修改價格, 但為了要將直傳到下一個網頁, 又必須要用 Input 文字輸入項, 今天的文章就來看麥如何做到表單文字輸入項的唯讀屬性

Diabled

這是大多數的人直覺想到的方法

<form>
  <input name="price" value="100" disabled>
</form>

這個方法看起來是解決了問題, 不過後壁的麻煩就來了, 在下一個網頁中使用 Request.Form("price") 你會發現 Request.Form("price") 的值是空字串, 因為加上了 disabled , 所以 price 的值並沒有送出

Blur 事件 (Event)

卡好的方法是利用 JavaScript 中 Form 的 Blur 事件, 當使用者的滑鼠按到文字輸入項時它會得到焦點, 游標會停在輸入格, 而當滑鼠按到文字輸入項以外部份, 則該輸入項會失去焦點, 因此我們可以使用 Blur 事件來強制讓文字輸入項失去焦點

<form>
  <input name="price" value="100" onFocus="this.blur()">
</form>

將 disabled 改為 onFocus="this.blur()", 當使用者按到該文字輸入項時, 也就是得到焦點時立刻失去焦點, 這樣就可以達到唯讀的效果! 是不是很簡單

希望這篇文章對你有幫助!