[java/VB script] 相關的 readonly 屬性效果介紹

gswdkimo

text & password maxlength: 欄位資料輸入最大長度，單位為字元

1. <input type="text" name="t1" size="3" maxlength="3"> <br>
2. <input type="password" name="p1" size="3" maxlength="3">

複製代碼

最多輸入3碼:

******************************************************************

text & password readonly: 唯讀

1. <input type="text" name="t2" value="12345" readonly> <br>
2. <input type="password" name="p2" value="12345" readonly>

複製代碼

******************************************************************

text & password readonly: 唯讀，且把字顏色改成灰色，就像disabled了

1. <input type="text" name="t3" value="12345" readonly style="color: gray">
2. <br>
3. <input type="password" name="t3" value="12345" readonly
4. style="color: gray">

複製代碼

******************************************************************

text & password disabled: 唯讀，且此變數不會送至後端

1. <input type="text" name="t3" value="12345" disabled> <br>
2. <input type="password" name="p3" value="12345" disabled>

複製代碼

******************************************************************

radio & checkbox disabled: 不能變更選取狀態，且此變數不會送至後端

1. <input type="radio" name="r1" value="M" checked disabled>男 <br>
2. <input type="radio" name="r1" value="F" disabled>女<br> <br>
3. <input type="checkbox" name="c1" value="1" checked disabled>1 <br>
4. <input type="checkbox" name="c1" value="2" disabled>2

複製代碼

男 女
1 2

******************************************************************

checkbox 無readonly屬性，但可以用以下的方法模擬:

1. <input type="checkbox" name="c2" value="1" checked onclick="return false">1 <br>
2. <input type="checkbox" name="c2" value="2" onclick="return
3. false">2

複製代碼

1 2

******************************************************************

radio 無readonly屬性，但可以用以下的方法模擬:
1.當無預設的點選時:

1. <input type="radio" name="r2" value="M" onclick="return false">男 <br>
2. <input type="radio" name="r2" value="F" onclick="return
3. false">女

複製代碼

男 女
2-1.當有預設的點選時:

1. <input type="radio" name="r3" value="M" checked onclick="return false">男 <br>
2. <input type="radio" name="r3" value="F" onclick="document.forms[0].r3[0].checked=true;return
3. false">女

複製代碼

男 女
2-2.當有預設的點選時:

1. <input type="radio" name="r4" value="M" onclick="document.forms[0].r4[1].checked=true;return false">男 <br>
2. <input type="radio" name="r4" value="F" checked onclick="return false">女 <br>
3. <input type="radio" name="r4" value="X" onclick="document.forms[0].r4[1].checked=true;return
4. false">秀吉

複製代碼

男 女 秀吉

******************************************************************

select disabled: 不能變更選取狀態，且此變數不會送至後端:

1. <select name="s1" disabled> <br>
2. <option value="1">1</option> <br>
3. <option value="2" selected>2</option> <br>
4. <option value="3">3</option> <br>
5. </select>

複製代碼

1 2 3

******************************************************************

select 無readonly屬性，但可以用以下的方法模擬:

1. <select name="s1" onfocus="defaultIndex=this.selectedIndex"
2. onchange="this.selectedIndex=defaultIndex"> <br>
3. <option value="1">1</option> <br>
4. <option value="2" selected>2</option> <br>
5. <option value="3">3</option> <br>
6. </select>

複製代碼

1 2 3

******************************************************************

button & submit & reset 按鈕無readonly屬性，只能disabled:

1. <input type="button" value="確定" name="b1" disabled> <br>
2. <input type="submit" name="b2" disabled> <br>
3. <input type="reset" name="b3" disabled>

複製代碼

******************************************************************

textarea readonly: 唯讀

1. <textarea readonly>123456 <br>
2. 654321<br>
3. </textarea>

複製代碼

123456 654321

******************************************************************

textarea disabled: 唯讀，且此變數不會送至後端

1. <textarea disabled>123456<br>
2. 654321</textarea>

複製代碼

123456 654321

**************************************************

如果要用js改變readonly狀態，readonly的寫法必須是『 readOnly 』，否則會無效
例如: document.forms[0].t1.readOnly = true;