input/select/textarea标签的readonly效果实现
首先说一下readonly属性的应用场景
- 表单中,不能编辑对应的文本,但是仍然可以聚焦焦点
- 在提交表单的时候,该输入项会作为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效果实现的更多相关文章
- 设置onselectstart在ie浏览器下对于input及textarea标签页会生效
设置onselectstart在ie浏览器下对于input及textarea标签页会生效, 可以使用js来控制对于某种标签不生效,代码如下: document.onselectstart = disa ...
- input和textarea标签的select()方法----选中文本框中的所有文本
JavaScript select()方法选中文本框中的所有文本 <input>和<textarea>两种文本框都支持select()方法,这个方法用于选择文本框中的所有文本 ...
- jquery的clone方法bug的修复select,textarea的值丢失
项目中多次使用了iframe,但是操作起来是比较麻烦,项目中的现实情况是最外面是一个form,里面嵌套一个iframe,下面是一个其他的数据,在form提交的时候将iframe的数据和其他的数据一块提 ...
- iScroll滚动区域中select、input、textarea元素无法点击的Bug修复
最近在一个项目中使用了iScroll4模拟滚动效果,调试过程中发现一个表单页中的所有表单项都无法点击聚焦, 如<select>.<input>.<textarea> ...
- input/radio/select等标签的值获取和赋值
input/radio/select等标签的值获取和赋值,这几个是使用率最高的几个标签,获取值和赋值以及初始化自动填充数据和选择: 页面html: <div class=" " ...
- JavaScript为input/textarea自定义hover,focus效果
<title>JavaScript为input/textarea自定义hover,focus效果</title> <script type="text/java ...
- 第7天:input和label标签
今天学的不多,就只学了表单元素中的input和label标签.搬了房子,收拾了一下东西,太累了,所以没有学很多.明天还上班,今天就先到这. 一.input input标签type属性有以下几个:tex ...
- [转]SpringMVC<from:form>表单标签和<input>表单标签简介
原文地址:https://blog.csdn.net/hp_yangpeng/article/details/51906654 在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标 ...
- python 之 前端开发(form标签、单选框、多选框、file上传文件、按钮、label标签、下拉列表、textarea标签、fieldset标签、table标签)
11.25 form标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
随机推荐
- Codeforces Round #250 (Div. 2) A. The Child and Homework
注意题目长度不能考虑前缀,而且如果即存在一个选项的长度的两倍小于其他所有选项的长度,也存在一个选项的长度大于其他选项长度的两倍,则答案不是一个好的选择,只能选择C. #include <iost ...
- Yahoo!网站性能最佳体验的34条黄金守则
Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践.他们为此进行了一系列的实验.开发了各种工具.写了大量的文章和博客并在各种会议上参与探讨.最佳实践的核心就是 ...
- 【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'\),最小化$ \ ...
- Android -- TabHost
TabHost 也就相当于Windows下的选项框 有两种实现方式 1. 继承TabActivity (已经废弃):从TabActivity中用getTabHost()方法获取TabHost 2. ...
- BZOJ1485: [HNOI2009]有趣的数列
Description 我们称一个长度为2n的数列是有趣的,当且仅当该数列满足以下三个条件: (1)它是从1到2n共2n个整数的一个排列{ai}: (2)所有的奇数项满足a1<a3<…&l ...
- 定时器的fireDate指的是触发时间
1.定时器开启后,会在经过设定的时间间隔后才会执行第一次定时操作.而不是立马开启. NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval: ...
- thinkphp 联表查询,排序
$info =M('productbase'); $info= $info->alias('a')->field('a.id,cid,title,address,protype,time, ...
- DataGridView 的单元格的边框、 网格线样式的设定【转】
1) DataGridView 的边框线样式的设定DataGridView 的边框线的样式是通过 DataGridView.BorderStyle 属性来设定的. BorderStyle 属性设定值是 ...
- iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案
做touchweb开发的时候,做头疼的是,电脑上面时候好的,有些手机上面也是好的,个别手机和浏览器出现问题,对于这些,只能慢慢调试,找问题. 今天说一下比较老的IOS的问题,那就是"iOS下 ...
- linux修改时区为中国时区(北京)
cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime