將input框置為只讀的方法
阿新 • • 發佈：2019-02-04
有時候，我們希望表單中的文字框是隻讀的，讓使用者不能修改其中的資訊，如使<input type="text" name="input1" value="中國"> 的內容，"中國"兩個字不可以修改。實現的方式歸納一下，有如下幾種。
方法1: onfocus=this.blur() 當滑鼠放不上就離開焦點
<input type="text" name="input1" value="中國" onfocus=this.blur()>
方法2:readonly
<input type="text" name="input1" value="中國" readonly>
<input type="text" name="input1" value="中國" readonly="true">
方法3: disabled
<input type="text" name="input1" value="中國" disabled="true">
完整的例子:
<input name="ly_qq" type="text" tabindex="2" onMouseOver="this.className='input_1'" onMouseOut="this.className='input_2'" value="123456789" disabled="true" readOnly="true" />
disabled="true" 此果文字會變成灰色，不可編輯。
readOnly="true" 文字不會變色，也是不可編輯的
css遮蔽輸入：<input style="ime-mode: disabled">
有兩種方法第一：disabled="disabled"這樣定義之後被禁用的 input 元素既不可用，也不可點選。第二：readonly="readonly" 只讀欄位是不能修改的。不過，使用者仍然可以使用 tab 鍵切換到該欄位，還可以選中或拷貝其文字；
方法1: onfocus=this.blur() 當滑鼠放不上就離開焦點
<input type="text" name="input1" value="中國" onfocus=this.blur()>
方法2:readonly
<input type="text" name="input1" value="中國" readonly>
<input type="text" name="input1" value="中國" readonly="true">
方法3: disabled
<input type="text" name="input1" value="中國" disabled="true">
完整的例子:
<input name="ly_qq" type="text" tabindex="2" onMouseOver="this.className='input_1'" onMouseOut="this.className='input_2'" value="123456789" disabled="true" readOnly="true" />
disabled="true" 此果文字會變成灰色，不可編輯。
readOnly="true" 文字不會變色，也是不可編輯的
css遮蔽輸入：<input style="ime-mode: disabled">
有兩種方法第一：disabled="disabled"這樣定義之後被禁用的 input 元素既不可用，也不可點選。第二：readonly="readonly" 只讀欄位是不能修改的。不過，使用者仍然可以使用 tab 鍵切換到該欄位，還可以選中或拷貝其文字；