js控制表单操作的常用代码小结


Posted in Javascript onAugust 15, 2013

1.鼠标经过时自动选择文本
Code:

鼠标划过自动选中:<input type="text" value="默认值" onMouseOver="this.focus();" onfucus="this.seelct()" />

2.设置单选按钮
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>js操作表单</title>
<script language="javascript">
function getChoice(){
var oForm=document.forms["myForm1"];
var aChoice=oForm.camera;
for(i=0;i<aChoice.length;i++)
if(aChoice[i].checked)
break;
alert("您使用的相机品牌是:"+aChoice[i].value);
}
function setChoice(iNum){
var oForm=document.forms["myForm1"];
oForm.camera[iNum].checked=true;
}
</script>
</head>
<body>
<form method="post" name="myForm1" action="">
<p>您使用的相机品牌</p>
<p>
<input type="radio" name="camera" id="canon" value="Canon">
    <label for="canon">Canon</label>
</p>
<p>
<input type="radio" name="camera" id="nikon" value="Nikon">
    <label for="nikon">Nikon</label>
</p>
<p>
<input type="radio" name="camera" id="sony" value="Sony">
    <label for="sony">Sony</label>
</p>
<p>
<input type="radio" name="camera" id="pentax" value="Tentax">
    <label for="pentax">Tentax</label>
</p>
<p>
<input type="button" value="检查选中对象" onClick="getChoice();">
    <input type="button" value="设置为Canon" onClick="setChoice(0);">
</p>
</form>
</body>
</html>

3.设置复选框
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>js操作表单</title>
<script language="javascript">
function changeBoxes(action){
var oForm=document.forms["myForm1"];
var oCheckBox=oForm.hobby;
for(var i=0;i<oCheckBox.length;i++)//遍历每一个选项
if(action<0) //反选
oCheckBox[i].checked=!oCheckBox[i].checked;
else
oCheckBox[i].checked=action;
}
</script>
</head>
<body>
<form method="post" name="myForm1" action="">
<p>
<input type="checkbox" name="hobby" id="ball" value="ball">
    <label for="ball">打球</label>
</p>
<p>
<input type="checkbox" name="hobby" id="TV" value="TV">
    <label for="TV">看电视</label>
</p>
<p>
<input type="checkbox" name="hobby" id="net" value="net">
    <label for="net">上网</label>
</p>
<p>
<input type="checkbox" name="hobby" id="book" value="book">
    <label for="book">看书</label>
</p>
<p>
<input type="checkbox" name="hobby" id="run" value="run">
    <label for="run">跑步</label>
</p>
<p>
       <input type="button" value="全选" onClick="changeBoxes(1);">
    <input type="button" value="全不选" onClick="changeBoxes(0);"/>
    <input type="button" value="反选" onClick="changeBoxes(-1);"/>
</p>
</form>
</body>
</html>

4.设置下拉菜单
下拉菜单中最重要的莫过于访问被用户选中的选项,对于单选下拉菜单可以通过selectedIndex属性轻松地访问到选项。
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>js操作表单</title>
<script language="javascript">
function checkSingle(){
var oForm=document.forms["myForm1"];
var oSelectBox=oForm.constellation;
var iChoice=oSelectBox.selectedIndex;//获取选中项
alert("您选中了:"+oSelectBox.options[iChoice].text);
}
</script>
</head>
<body>
<form method="post" name="myForm1" action="">
<p>
<select id="constellation" name="constellation">
     <option value="Aries" selected="selected">白羊</option>
        <option value="Taurus">金牛</option>
        <option value="Gemin">双子</option>
        <option value="Leo">狮子</option>
        <option value="Virgo">处女</option>
    </select>
</p>
<p>
<input type="button" value="查看选项" onClick="checkSingle();" />
</p>
</form>
</body>
</html>
Javascript 相关文章推荐
JavaScript 拾碎[三] 使用className属性
Oct 16 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
html+js实现动态显示本地时间
Sep 21 Javascript
js中键盘事件实例简析
Jan 10 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
Vue2单一事件管理组件通信
May 09 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 #Javascript
jQuery UI 实现email输入提示实例
Aug 15 #Javascript
javascript中如何处理引号编码&amp;#034;
Aug 15 #Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 #Javascript
jquery ajax方式直接提交整个表单核心代码
Aug 15 #Javascript
js冒泡法和数组转换成字符串示例代码
Aug 14 #Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 #Javascript
You might like
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
php搜索文件程序分享
2015/10/30 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
jQuery 操作option的实现代码
2011/03/03 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
原生js+canvas实现下雪效果
2020/08/02 Javascript
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
python3获取当前文件的上一级目录实例
2018/04/26 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
详解Python用户登录接口的方法
2019/04/17 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
幼儿园运动会入场词
2014/02/10 职场文书
工商治理实习生的自我评价分享
2014/02/20 职场文书
保护环境倡议书
2014/04/14 职场文书
重阳节标语大全
2014/10/07 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis