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会给用户一种错觉。