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

input/select/textarea标签的readonly效果实现的更多相关文章

  1. 设置onselectstart在ie浏览器下对于input及textarea标签页会生效

    设置onselectstart在ie浏览器下对于input及textarea标签页会生效, 可以使用js来控制对于某种标签不生效,代码如下: document.onselectstart = disa ...

  2. input和textarea标签的select()方法----选中文本框中的所有文本

    JavaScript select()方法选中文本框中的所有文本 <input>和<textarea>两种文本框都支持select()方法,这个方法用于选择文本框中的所有文本 ...

  3. jquery的clone方法bug的修复select,textarea的值丢失

    项目中多次使用了iframe,但是操作起来是比较麻烦,项目中的现实情况是最外面是一个form,里面嵌套一个iframe,下面是一个其他的数据,在form提交的时候将iframe的数据和其他的数据一块提 ...

  4. iScroll滚动区域中select、input、textarea元素无法点击的Bug修复

    最近在一个项目中使用了iScroll4模拟滚动效果,调试过程中发现一个表单页中的所有表单项都无法点击聚焦, 如<select>.<input>.<textarea> ...

  5. input/radio/select等标签的值获取和赋值

    input/radio/select等标签的值获取和赋值,这几个是使用率最高的几个标签,获取值和赋值以及初始化自动填充数据和选择: 页面html: <div class=" " ...

  6. JavaScript为input/textarea自定义hover,focus效果

    <title>JavaScript为input/textarea自定义hover,focus效果</title> <script type="text/java ...

  7. 第7天:input和label标签

    今天学的不多,就只学了表单元素中的input和label标签.搬了房子,收拾了一下东西,太累了,所以没有学很多.明天还上班,今天就先到这. 一.input input标签type属性有以下几个:tex ...

  8. [转]SpringMVC<from:form>表单标签和<input>表单标签简介

    原文地址:https://blog.csdn.net/hp_yangpeng/article/details/51906654 在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标 ...

  9. python 之 前端开发(form标签、单选框、多选框、file上传文件、按钮、label标签、下拉列表、textarea标签、fieldset标签、table标签)

    11.25 form标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

随机推荐

  1. Codeforces Round #250 (Div. 2) A. The Child and Homework

    注意题目长度不能考虑前缀,而且如果即存在一个选项的长度的两倍小于其他所有选项的长度,也存在一个选项的长度大于其他选项长度的两倍,则答案不是一个好的选择,只能选择C. #include <iost ...

  2. Yahoo!网站性能最佳体验的34条黄金守则

    Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践.他们为此进行了一系列的实验.开发了各种工具.写了大量的文章和博客并在各种会议上参与探讨.最佳实践的核心就是 ...

  3. 【BZOJ】2876: [Noi2012]骑行川藏

    题意 给出\(s_i, k_i, v_i', E\),满足\(\sum_{i=1}^{n} k_i s_i ( v_i - v_i' )^2 \le E, v_i > v_i'\),最小化$ \ ...

  4. Android -- TabHost

    TabHost 也就相当于Windows下的选项框 有两种实现方式 1.  继承TabActivity (已经废弃):从TabActivity中用getTabHost()方法获取TabHost 2. ...

  5. BZOJ1485: [HNOI2009]有趣的数列

    Description 我们称一个长度为2n的数列是有趣的,当且仅当该数列满足以下三个条件: (1)它是从1到2n共2n个整数的一个排列{ai}: (2)所有的奇数项满足a1<a3<…&l ...

  6. 定时器的fireDate指的是触发时间

    1.定时器开启后,会在经过设定的时间间隔后才会执行第一次定时操作.而不是立马开启. NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval: ...

  7. thinkphp 联表查询,排序

    $info =M('productbase'); $info= $info->alias('a')->field('a.id,cid,title,address,protype,time, ...

  8. DataGridView 的单元格的边框、 网格线样式的设定【转】

    1) DataGridView 的边框线样式的设定DataGridView 的边框线的样式是通过 DataGridView.BorderStyle 属性来设定的. BorderStyle 属性设定值是 ...

  9. iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案

    做touchweb开发的时候,做头疼的是,电脑上面时候好的,有些手机上面也是好的,个别手机和浏览器出现问题,对于这些,只能慢慢调试,找问题. 今天说一下比较老的IOS的问题,那就是"iOS下 ...

  10. linux修改时区为中国时区(北京)

    cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime