表单处理[5]

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>9:42</title>

<script>

//跨浏览器添加事件

function addEvent(obj,type,fn){

if(obj.addEventListener){

obj.addEventListener(type,fn,false);

}else if(obj.attachEvent){

obj.attachEvent(‘on‘+type,fn);

}

}

//跨浏览器移除事件

function removeEvent(obj,type,fn){

if(obj.removeEventListener){

obj.removeEventListener(type,fn,false);

}else if(obj.detachEvent){

obj.detachEvent(‘on‘+type,fn);

}

}

//跨浏览器阻止默认行为

function preDef(evt){

var e=evt||window.event;

if(e.preventDefault){

e.preventDefault();

}else{

e.returnValue=false;

}

}

//跨浏览器获取目标对象

function getTarget(evt){

if(evt.target){  //W3C

return evt.target;

}else if(window.event.srcElement){ //IE

return window.event.srcElement;

}

}

//跨浏览器获取字符编码

function getCharCode(evt){

var e=evt||window.event;

if(typeof e.charCode==‘number‘){

return e.charCode;

}else {

return e.keyCode;

}

}

// 过滤输入模式:纯数字

// 1.禁止或屏蔽非数字键的输入,阻止非数字键的默认行为

// 2.验证后取消,你可以先输入非法字符,然后判断后,取消你刚输入的文本

addEvent(window,‘load‘,function(){

var fm=document.getElementById(‘myForm‘);

var city=fm.elements[‘city‘];

//alert(city);

city.multiple=true;

city.size=5;

// alert(city.options);

//alert(city.options.length);

//alert(city.options[0]);

//alert(city.type);  //多行 select-one单行,select-multiple多行

//alert(city.options[0].value+‘---‘+city.options[0].text);

//使用标准DOM也可以获取,不建议在表单中使用标准DOM,

//因为HTML DOM的兼容性已经非常好的,而且简单容易,并且好理解

//alert(city.options[0].firstChild.nodeValue+‘---‘+city.options[0].getAttribute(‘value‘));

//alert(city.options[3].value);  //当选项没有value值的时候,IE浏览器会返回空字符串,其它浏览器会返回text值

// addEvent(city,‘change‘,function(){

//alert(this.selectedIndex);

//alert(this.options[this.selectedIndex].value+‘---‘+this.options[this.selectedIndex].text); //得到当前选项的text值和value值

// })

//这个定位必须在select对象上

//city.selectedIndex=3;   //定位到某个选项上

//这个定位必须在option对象上

//city.options[1].selected=true;

// addEvent(city,‘change‘,function(){

//     if(this.options[2].selected){

//         alert(‘正确‘);

//     }else{

//         alert(‘错误‘);

//     }

// })

//标准DOM添加方法

// var option =document.createElement(‘option‘);

// var text=document.createTextNode(‘北京t‘);

// option.appendChild(text);

// option.setAttribute(‘value‘,‘北京v‘);

// city.appendChild(option);

//使用option构造函数添加

//var option=new Option(‘北京t‘,‘北京v‘);

//option.appendChild(option); //IE不兼容

//city.add(option,0);  //0非IE浏览器会不兼容

//city.add(option,null); //null表示不存在的位置 IE不显示了

//PS:在DOM规定,add()中两个参数是必须的,如果不确定索引,那么第二个参数设置null即可,即默认移入最后一个选项。但IE中规定第二个参数是可选的,所以设置null表示存入不存在的位置,导致失踪,为了兼容性,我们传递undefined即可兼容。

//city.add(option,undefined);  //最佳兼容方案,都兼容了

// 标准DOM移除

//city.removeChild(city.options[0]);

//都是使用自带的HTML DOM

city.remove(0);

city.remove(0);

city.remove(0);

//另一种方法

city.options[0]=null;

})

</script>

</head>

<body>

<form id="myForm" name="yourForm">

<select name="city" multiple="multiple" size="5">

<option value="上海v">上海t</option>

<option value="南京v">南京t</option>

<option value="盐城v">盐城t</option>

<option>无value</option>

</select>

</form>

</body>

</html>

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

时间: 2024-10-12 20:43:08

表单处理[5]的相关文章

Django表单上传

任务描述:实现表单提交(上传文件) 1.项目目录: 2.源代码: regist.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>regist</title> </head> <body> <h3>regist</h3> <hr> <

表单的作用

①input的作用分为:单选按钮.文本框.密码框.复选按钮.隐藏表单域.文本选择框.图片按钮.普通按钮.提交按钮.重置按钮 ②select的作用:可创建单选或多选菜单,含有<option>标签 在HTML5中的新属性:1.autofocus属性            值autofocus                     规定在页面加载后文本区域自动获得焦点: 2.disabled                        disabled                      

JS设置读取删除cookie及表单交互

学习cookie和表单交互留下的一点笔记 什么是cookie?cookie 是存储于客户端的变量.当设备请求页面时,就会发送cookie.首先需要稍微了解一下cookie的结构,简单地说:cookie是以键值对的形式保存的,即key=value的格式.各个cookie之间一般是以";"分隔.JS设置cookie:document.cookie= key + '=' + value + ';expires=' + Date;其中Date为cookie的过期时间.实际案例: //setCo

HTML中的表格、表单元素与框架的构建

表格 <table></table>表格 width: 宽度可用像素或百分比: height:高度可用像素或百分比: border:边框宽度: cellpadding:内容跟单元格边框的边距 常用0: cellspacing:单元格之间的间距  常用0: align: 对齐方式: bgcolor:背景色: <tr></tr> 行 align:一行内容的水平对齐方式: valign: 垂直对齐方式: <td></td> 单元格 <

form表单那点事儿(上) 基础篇

做为html中最为常见,应用最广泛的标签之一,form常伴随前端左右.了解更深,用的更顺. 目录: 表单属性 表单元素 常识 模拟外观 表单属性 这个表单展示了form表单常用的属性 属性名 属性值 描述 action 一个url地址 指定表单提交到的地址 method `GET` , `POST` 表单将以此种方法提交到服务器 target `_self` 当前页面 `_blank` 每次在新窗口打开 `blank` 每次在同一个新窗口打开 `_parent` 父级frame `_top` 顶

html(五) -- 表单标签

表单标签: 表单标签的作用是用于提交数据给服务器的. 表单标签的根标签是<form>标签 常用的属性:    action: 该属性是用于指定提交数据的地址.    method: 指定表单的提交方式.            get : 默认使用的提交方式.  提交的数据会显示在地址栏上.            post :  提交的数据不会显示在地址栏上.注意: 表单项的数据如果需要提交到服务器上面,那么表单项必须要有name的属性值. 代码示例: 1 <!DOCTYPE html&g

python :表单验证--对每一个输入框进行验证

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"/> <title>Title</title> <style> .error{ color

VALIDFORM前端小插件实现表单验证;

好开心啊,有了这个小插件就不用在服务器端去写用户输入的东西是否合法,又美观: 这个是官网,使用入门那儿很简单,不如直接改demo; 下载的demo就是这个: 小李子(永奇商城注册页面表单验证): 就是这个,那个邮箱正则验证效果如何加上去的呢: 看demo就知道(把demo里面之中整个demo文件夹拷贝在项目之中,将css之中validform必须的留下,其他删除掉,也就是demo文件夹里面/*==========以下部分是Validform必须的===========*/这一行字下面的css样式

HTML:图片热点 网页划区 表单

图片热点: 划出图片中的区域,做超链接,点击该区域就可以直接跳转到链接网站 <img src="../../../3.jpg" title="血精灵" usemap="jingling" /> <map name="jingling"> <area shape="rect" coords="52,217,288,395" href="http://

【HTML5】表单属性

* autocomplete autocomplete 属性规定 form 或 input 域应该拥有自动完成功能. 注释:autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color. 当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项: <!DOCTYPE HTML> <