input/select/textarea標簽的readonly效果實現

首先說一下readonly屬性的應用場景

1. 表單中，不能編輯對應的文本，但是仍然可以聚焦焦點
2. 在提交表單的時候，該輸入項會作為form的一項提交（目的）

這里要說一下disabled和readonly的不同，如果一個輸入項的disabled設為true，則該表單輸入項不能獲取焦點，用戶的所有操作（鼠標點擊和鍵盤輸入等）對該輸入項都無效，最重要的一點是當提交表單時，這個表單輸入項將不會被提交。 

input標簽實現readonly效果

 input標簽需要readonly效果的，通常是type=text/checkbox/radio，下面一一介紹這三種類型的readonly效果實現。

<!-- input標簽type=text的readonly效果實現 -->
<input type="text" readonly="readonly" value="readonly" />

<!-- input標簽type=checkbox的readonly效果實現 -->
<input type="checkbox" name="checkbox1" value="checkbox1" id="red" checked="checked" />
<label for="red">紅色</label>
<input type="checkbox" name="checkbox2" value="checkbox2" id="color" />
<label for="color">顏色</label>
<script>
    //JS實現readonly效果
    $('input[type="checkbox"]').bind("click", function(){
        this.checked = !this.checked;
    });
</script>

<!-- input標簽type=radio的readonly效果實現 -->
<input type="radio" name="radio" value="radio1" id="red" checked="checked" />
<label for="red">紅色</label>
<input type="radio" name="radio" value="radio2" id="blue" />
<label for="blue">藍色</label>
<script>
    //JS實現readonly效果
    $('input[type="radio"]').each(function(){
        if($(this).attr("checked") != "checked"){
            $(this).attr("disabled", true);
        }
    });
</script>

textarea標簽實現readonly效果

<!-- textarea標簽的readonly效果實現 -->
<textarea readonly="readonly">不可編輯</textarea>

select標簽實現readonly效果

<!-- select標簽readonly效果實現 -->
<select name="readonly">
    <option value="red" selected="selected">red</option>
    <option value="green">green</option>
    <option value="blue">blue</option>
</select>
<script>
    //JS實現readonly效果
    $('select').focus(function(){
        this.defaultIndex = this.selectedIndex;
    });

    $('select').change(function(){
        this.selectedIndex = this.defaultIndex;
    });
</script>

 

如果值是固定的話，傳輸參數也可以通過設置隱藏域實現，讓原本顯示的disabled為true就行，如：

<!-- 設置隱藏域，傳輸數據 -->
<input type="hidden" name="hide" value="hide" />
<input type="text" name="hide" value="hide" disabled="disabled">

readonly的展示效果沒disabled好，disabled讓用戶知道這是不可編輯的，而readonly會給用戶一種錯覺。