Javascript操作表单实例讲解(下)


Posted in Javascript onJune 20, 2016

在上篇文章给大家介绍了js操作表单实例讲解(下)的相关知识,本文接着给大家介绍Javascript操作表单实例讲解(下),具体详情如下所示:

一、文本域

<input type="text" />

-----------------------------
操作文本域的值
value 属性 设置或者获取值
-----------------------------

二、单选按钮和多选按钮

<input type="radio" />
<input type="checkbox" />

----------------------------------------------
checked 返回或设置单选的选中状态
true 选中 false 未选中

value 属性 获取选中的值,必须先判断选中状态

----------------------------------------------

example: 全选/全不选/反选

Javascript操作表单实例讲解(下)

1.PNG

1.dom结构

<body>
<form name="myform" action="#" method="post" id="form1">
<script type="text/javascript">
for(var i=0;i<20;i++){
document.write("<input type='checkbox' name='nums' />"+(i+1)+"<br>" )
}
document.write("<input type='radio' name='radios'>全选");
document.write("<input type='radio' name='radios'>全不选");
document.write("<input type='radio' name='radios'>反选");
</script>
</form>
</body>

2.script脚本

2.1 采用调用函数的方式

<script type="text/javascript">
window.onload=function(){
var nums=document.getElementsByName("nums");
var radios=document.getElementsByName("radios");
fun(nums,i,radios);
function fun(a,b,c){
c[b].onclick=function(){
if(b==0){
for(var i=0;i<a.length;i++){
a[i].checked=true;
}
}else if(b==1){
for(var i=0;i<a.length;i++){
a[i].checked=false;
}
}else if(b==2){
for(var i=0;i<a.length;i++){
if(a[i].checked){
a[i].checked=false;
}else{
a[i].checked=true;
}
}
}
}
}
</script>

2.2 采用在比闭包中创建匿名函数的方式

<script type="text/javascript">
window.onload=function(){
var nums=document.getElementsByName("nums");
var radios=document.getElementsByName("radios");
for(var i=0;i<radios.length;i++){
(function(a){
radios[a].onclick=function(){
if(a==0){
for(var i=0;i<nums.length;i++){
nums[i].checked=true;
}
}else if(a==1){
for(var i=0;i<nums.length;i++){
nums[i].checked=false;
}
}else if(a==2){
for(var i=0;i<nums.length;i++){
if(nums[i].checked){
nums[i].checked=false;
}else{
nums[i].checked=true;
}
}
}
} 
})(i);
}
}
</script>

三、下拉框

<form name="myform">
<select name="sels">
<option>北京大学</option>
<option>长安大学</option>
<option>南京大学</option>
</select>
</form>

----------------------------------------

selected 设置或返回下拉框的选中状态

true 选中 false 未选中

selectedIndex 设置或返回下拉框选中的索引号

----------------------------------------

example1:选中长安大学

<script>
var sels=document.myform.sels;
//var sels=document.myform.sels.options;//(也可以)
sels[1].selected=true;
</script>

或者

<script>
var sels=document.myform.sels;
// var sels=document.myform.sels.options;//(也可以)
sels.selectedIndex=1;
</script>

example2:单价*数量=总价

Javascript操作表单实例讲解(下)

1.PNG

1.dom结构

<body>
<form name="myform" action="#" method="post" id="form1">
单价:<input type="text" name="price" value="200">
<select name="count">数量
<option>1个</option>
<option>2个</option>
<option>3个</option>
</select>
总价:<input type="text" name="total" value="200">
</form>
</body>

2.script脚本

<script type="text/javascript">
window.onload=function(){
var price=document.myform.price;
var count=document.myform.count;
var total=document.myform.total;
count.onchange=function(){ 
total.value=parseInt(price.value)*(count.selectedIndex+1); 
}
} 
</script>

四、文本区域

<textarea name="info" rows="7" cols="60"></textarea>

----------------------------

value 返回或设置文本区域的值
----------------------------

example:动态检测文本区域中输入的字符长度

Javascript操作表单实例讲解(下)

1.PNG

1.dom结构:

<body>
<div id="content">一共能输入20个字符,已输入0个,还能输入20个</div>
<form name="myform" action="#" method="post" id="form1">
<textarea name="info" cols="60" rows="7"></textarea>
</form>
</body>

2.script脚本:

<script type="text/javascript">
window.onload=function(){
var content=document.getElementById("content");
var info=document.myform.info;
info.onkeyup=info.onkeydown=function(){
var str=info.value;
var length=check(str);
var strs=20;
if (length<=strs) {
content.innerHTML="一共能输入"+strs+"个字符,已输入"+length+"个,还能输入"+(strs-length)+"个";
}else{
info.value=str.substring(0,strs);
} 
}
//检测中英文
function check(str){
var num=0;
for(var i=0;i<str.length;i++){
if(str.charCodeAt(i)>=0 && str.charCodeAt(i)<=255){//英文
num++;
}else{//中文
num+=2;
}
}
return num;
}
}
</script>

五、表单验证

onsubmit 当表单提交的时候触发的事件

----------------------------------------------------------------------------------------------

<form name="myform" action="www.baidu.com" method="post" onsubmit="return check(this)"></form>
return false; //阻止表单默认行为

----------------------------------------------------------------------------------------------

六、submit方法

该方法用来实现自动提交

而事件onsubmit只能用来手动提交

以上所述是小编给大家介绍的Javascript操作表单实例讲解(下),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
JavaScript中常用的运算符小结
Jan 18 Javascript
详解jQuery插件开发中的extend方法
Nov 19 Javascript
js控制浏览器全屏示例代码
Feb 20 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
js实现砖头在页面拖拉效果
Nov 20 Javascript
原生js实现放大镜效果
Jan 11 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
微信小程序时间标签和时间范围的联动效果
Feb 15 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 #Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 #Javascript
JavaScript操作表单实例讲解(上)
Jun 20 #Javascript
jquery 获取select数组与name数组长度的实现代码
Jun 20 #Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 #Javascript
使用jQuery给input标签设置默认值
Jun 20 #Javascript
js中获取时间new Date()的全面介绍
Jun 20 #Javascript
You might like
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
Display SQL Server Version Information
2007/06/21 Javascript
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
Extjs中常用表单介绍与应用
2010/06/07 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
Python在不同目录下导入模块的实现方法
2017/10/27 Python
单利模式及python实现方式详解
2018/03/20 Python
详解Django配置优化方法
2019/11/18 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
django使用graphql的实例
2020/09/02 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
求职信的要素有哪些呢
2013/12/26 职场文书
学生手册家长评语
2014/02/10 职场文书
竞选部门副经理的自荐书范文
2014/02/11 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
交通事故协议书
2014/04/15 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
基石观后感
2015/06/12 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
LeetCode189轮转数组python示例
2022/08/05 Python