12. DOM
基于是针对XML的基于树的API,SAX(Simple API for XML)是一个基于事件的XML解析的API.
node节点的属性和方法
| nodeName | String | 节点的名字,根据节点的类型定义 |
| nodeValue | String | 节点的值,根据节点的类型定 |
| nodeType | Number | 节点类型常量 |
| ownerDocument | Document | 指向这个节点所属的文档 |
| firstChild | Node | 指向在childNodes列表中的第一个节点 |
| lastChild | Node | 指向在childNodes列表中的最后一个节点 |
| childNodes | NodeList | 所有节点的列表 |
| previousSibling | Node | 指向前一个兄弟节点; |
| nextSibling | Node | 指向后一个兄弟节点 |
| hasChildNodes() | Boolean | 当childNodes包含一个或多个节点时,返回真 |
| attributes | NamedNodeMap | 包含了代表一个元素的特性的Attr对象,仅用于Element节点 |
| appendChild(node) | Node | 将node添加到childNodes的末尾 |
| removeChilde(node) | Node | 从childNodes中删除node |
| replaceChild(newnode,oldnode) | Node | 将childNodes中的oldnode替换成newnode |
| insertBefore(newnode,refnode) | Node | 在childNodes中的refnode之前插入newnode |
例子:
var oHtml = document.documentElement;
var oHead = oHtml.firstChild; // or var oHead = oHtml.childNodes[0] or var oHead = oHtml.childNodes.Item[0]
var oBody = oHtml.lastChild; // or var oBody = oHtml.childNodes[1] or var oBody = oHtml.childNodes.Item[1]
var oBody = document.body;
alert(oHead.parentNode == oHtml);//outputs "true"
alert(oBody.parentNode == oHtml);//outputs "true"
alert(oBody.previousSibling == oHead);//outputs "true"
alert(oHead.nextSibling == oBody); //outputs "true"
alert(oHead.ownerDocument == document);//outputs "true"
DOM特性的方法
getAttribute(name) //or attributes.getNamedItem(name).value
setAttribute(name,newvalue)// or attribute.getNamedItem(name).value = newvalue;
removeAttribute(name) //or attributes.removeNamedItem(name)
DOM访问指定节点方法
getElementsByTagName() //用来返回一个包含所有的tagName(标签名)特性等于某个指定定值的NodeList.
如: var oImgs = document.getElementsByTagName(“img”);则把所有图开明的都丰于oImgsk ,只需使用方括号标志或者item()方法(getElementsByTagName()返回一个和childNodes一样的NodeList),就可以像访问子节点那样逐个访问这些节点了.
alert(oImgs[0].tagName); //outputs “IMG”
document.all //返回所有的元素
getElementsByName()//获取所有name特性等于指定什的元素.,在IE中它们仅仅检查<input/>和<img/>元素,同时还会返回ID等于给定名称的元素.
getElementById()//返回id特性等于指定值的元素,在IE6.0中还会返回给定的ID所匹配的某个元素的name特性.
DOM创建和操作节点
dom操作必须在页面完全载入之后才能进行.当页面正在载入时,要向DOM插入相关代码是不可能的,因为在页面完全下载到客户端机器之前,是无法完全构建DOM树的.因为这个原因,必须onload事件句柄来执行所有的代码.
createElement() //创建节点
createTextNode() //创建节点文本
appendChild() //追加节点
如:
<script type=”text/javascript”>
function createMessage(){
var oP= document.createElement(“p”);
var oText = document.createTextNode(“hello world”);
oP.appendChild(oText);
document.body.appendChild(oP);
</script>
<body onload = “createMessage()”>
</body>
removeChild() //删除一个节点
<script type=”text/javascript”>
function removeMessage(){
var oP= document.getElementsByTagName(“p”)[0];
document.body.removeChild(oP); //或者 oP.parentNode.removeChild(oP);
</script>
<body onload = “removeMessage()”>
</body>
replaceChild() //两个参数,被添加的节点和被捕替换的接点
<script type=”text/javascript”>
function replaceMessage(){
var oNewP= document.createElement(“p”);
var oText = document.createTextNode(“hello world”);
oNewP.appendChild(oText);
document.body.appendChild(oP);
var oOldP = document.body.getElementsByTagName(“p”)[0];
oOldP.parentNode.replaceChild(oNewP,oOldP);
</script>
<body onload = “replaceMessage()”>
</body>
insertBefore() //要添加的节点和要插在哪个节点之前.
<script type=”text/javascript”>
function replaceMessage(){
var oNewP= document.createElement(“p”);
var oText = document.createTextNode(“hello world”);
oNewP.appendChild(oText);
document.body.appendChild(oP);
var oOldP = document.body.getElementsByTagName(“p”)[0];
oOldP.parentNode.insertChild(oNewP,oOldP);
</script>
<body onload = “insertMessage()”>
</body>
createDocumentFragment() //创建文档碎片
function createFragment()
{
var arrText = ["first","second","third","fourth","firth","sixth","seventh","eighth","ninth","tenth"];
var oFragment = document.createDocumentFragment();
for (var i = 0; i < arrText.length ; i++ )
{
var op = document.createElement("p");
var oText = document.createTextNode(arrText[i]);
op.appendChild(oText);
oFragment.appendChild(op);
}
document.body.appendChild(oFragment);
}
遍历DOM
NodeIterator对象可以深度优先的搜索,要引用NodeIterator,需要用document.createNodeIterator()方法,这个方法有四个参数
第一个::root //从树中开始搜索的那个节点
第二个:whatToShow 一个数值代码,代表哪些节点需要访问
第三个:filter NodeFilter对象,用来决定需要忽略哪些节点
第四个:entityReferenceExpansion 表示是否需要扩展实体引用
what to Show参数可以是如下一个名多个常量
NodeFilter.SHOW_ALL //显示所有的节点类型
NodeFilter.SHOW_ELEMENT //显示元素节点
NodeFilter.SHOW_ATTRIBUTE //显示元素特性节点
NodeFilter.SHOW_TEXT //显示文本节点
NodeFilter.SHOW_CDATA_SECTION //显示CData section节点
NodeFilter.SHOW_ENTITY_REFERENCE //显示实体引用节点
NodeFilter.SHOW_ENTITY //显示实体节点
NodeFilter.SHOW_PROCESSING_INSTRUCTION //显示PI节点
NodeFilter.SHOW_COMMENT //显示注释节点
NodeFilter.SHOW_DOCUMENT //显示文档节点
NodeFilter.SHOW_DOCUMENT_FRAGMENT //显示文档碎片节点
NodeFilter.SHOW_NOTATION //显示记号节点
如:
var iterator = document.createNodeIterator(document, NodeFilter.SHOW_ALL,null,false);
var node1 = iterator.nextnode();面//前进一个节点
var node2 = iterator.previousNode(); //后退一个节点
TreeWalker有点像NodeIterator的大哥,它有NodeIterator所有的功能(nextNode()和previousNode())并添加了一些新的方法
parentNode()
firstChild()
lastChild()
nextSibling()
previousSibling()
13. TABLE方法
给<table/>元素添加以下内容
cation 指向<cation/>元素
tBodies <tbody/>元素的集合
tFoot 指向<tfoot/>元素
tHead 指向<thead/>元素
rows 表格中所有行的集合
createTHead() 创建<thead/>元素并将其放入表格；
createTFoot() 创建<tfoot/>元素并将其放入表格;
createCaption() 创建<caption/>元素并将其放入表格;
deleteTHead()
deleteTFoot()
deleteCaption()
deleteRow(position) 删除指定位置上的行
insertRow(position) 在rows集合中指定位置上插入一个新行
<tody/>元素添加了以下内容
rows <tbody/>中所有行的集合
deleterow(position) 删除指定位置上的行
insertrow(position) 在rows集合中的指定位置上插入一个新行
<tr/>元素中添加了以下内容
cells </tr>元素中所有的单元格的集合
deleteCell(position) 删除给定位置上的行
insertCell(position) 在cells集合的给定位置上插入一个新的单元格.
14. 正则表达式
JavaScript对正则表达式的支持是通过ECMAScript中的RegExp类实现的.
判断某个字符串是否匹配指定定的模式,最简单的情况是RegExp有个test()方法,如果给定字符串(只有一个参数)匹配这个模式,它就返回true,否则返回false
test()方法
var sToMatch = ‘cat’;
var reCat = /cat/;
alert(reCat.test(sToMatch)); //outputs ‘true’
var sColor = "blue";
var reB = //142/; //字符b
alert(reB.test(sColor));
search()方法 返回在字符串中出现的一个匹配的位置
var sTo = 'a bat , a cat , a fat bat, a fat cat';
var reAt = /at/gi;
alert(sTo.search(reAt)); //outputs 3
replace()方法,replace()方法的第二个参数可以是函数
var sToChange = "The sky is red. ";
alert(sToChange.replace("red","blue")); //outputs The sky is blue
或
var sToChange = “The sky is red “;
reRed = /red/;
alert(sToChange.replace(reRed,"blue")); //outputs The sky is blue
或
var sToChange = "The sky is red. ";
var reRed = /red/;
alert(sToChange.replace(reRed,function(sMatch){return "blue";})); //outputs The sky is blue
split(),将字符串分割成一系列子串并通过一个数组将它们返回.
var sColor = "red,blue,yellow,green"
var arrColors = sColor.split(",");//split at each comma
alert(arrColors); //outputs ‘red,blue,yellow,green’
或
var sColor1 = "red,blue,yellow,green"
var reComma = //,/;
var arrColors = sColor1.split(reComma);
alert(arrColors);
字符类
简单类
var sToMatch = ‘a bat. a cat. a fat bat. afat cat’
var reBatCatRat = /[bcf]at/gi;
var arrMatches = sToMatch.match(reBatCatRat);
或
var sToMatch = ‘a bat. a cat. a fat bat. afat cat’
var reBatCatRat = /[/uoo62cf]at/gi;
var arrMatches = sToMatch.match(reBatCatRat);
负向类
^脱节字符告诉正则表达式字符不能匹配后面跟着的字符
var sToMatch = ‘a bat. a cat. a fat bat. afat cat’
var reBatCatRat = /[^bf]at/gi; //以b或f开始的不能进行匹配
var arrMatches = sToMatch.match(reBatCatRat);
范围类
- 字符表示”从什么到什么”
[a-z] 表示从字母a 到z
var sToMatch = "num1,num3,num4,num4,num5,num7"
var reonetoFour = /num[1-4]/gi; //[^1-4]表示排除1-4
alert(sToMatch.match(reonetoFour));
组合类
由几种其它的类组合而成的字符类.
[a-m1-4/n]//表示匹配所有从a到m的字母及从1-4的数字,以及一个换行符.
预定义类
| 代码 | 等同于 | 匹配 |
| . | [^/n/r] | 除了换行和回车之外的任意字符 |
| /d | [0-9] | 数字0到9 |
| /D | [^0-9] | 除数字0到9 |
| /s | [ /t/n/x0B/f/r] | 空白字符 |
| /S | [^/t/n/x0B/f/r] | 非空字符 |
| /w | [a-zA-Z_0-9] | 单词字符(所有的字母,所有的数字和下划线) |
| /W | [^a-zA-Z_0-9] | 非单词字符 |
var sToMatch = "567 9838 abc"
var reThreeNums = /[0-9][0-9][0-9]/; //匹配3个数字
alert(reThreeNums.test(sToMatch)); //outputs true
或
var sToMatch = "567 9838 abc"
var reThreeNums = //d/d/d/;
alert(reThreeNums.test(sToMatch));//outputs true
量词
简单量词
| 代码 | 量词 |
| ? | 出现零次或一次 |
| * | 也现零次或多次(任意次) |
| + | 出现一次或多次(至少出现一次) |
| {n} | 一定出现n次 |
| {n,m} | 至少出现n次但不超过m次 |
| {n,} | 至少出现n次 |
假设想匹配单词bread,read或red.如下如下两种方法
var reBreadReadorRed = /b?rea?d/
或
var reBreadReadOrRed = /b{0,1}rea{0,1}d/
量词与字符类一起使用
var re = /b[ae]{1,2}d/;//这个表达式表示,字符类[ae]可以现最少一次,最多两次
| 正则表达式 | 匹配 |
| ba?d | bad,bd |
| ba*d | bd,bad,baad,baaad |
| ba+d | bad,baad,baaad |
| ba{0,1}d | bad,bd |
| ba{0,}d | bd,bad,baad |
| ba{1,}d | bad,baad,baad |
15. 事件
事件对象(Event)只在发生事件时才被创建,且只有事件处理函数才能访问.所有事件处理函数执行完毕后,事件对象被捕销毁.
IE中每个元素有两个方法 attachEvent() 和detachEvent()
var fnClick = function(){ alert(“test”);}
var oDiv = document.getElementById(“div1”);
oDiv.attachEvent(“onclick”,fnclick);或oDiv.onclick = fnClick; //add the event handle
oDiv.detachEvent(“onclick”,fnClick);//remove the event handle
DOM中方法addEventListener()和removeEventListener()用来分配和除事件函数.
var fnClick = function(){ alert(“test”);}
var oDiv = document.getElementById(“div1”);
oDiv.addEventListener(“onclick”,fnclick,false);或oDiv.onclick = fnClick; //add the event handle
oDiv.removeEventListener(“onclick”,fnClick,false);//remove the event handle
事件的属性和方法
IE中
| 特性 | 类型 | 可读/可写 | 描述 |
| altKey | Boolean | R/W | ture表示按下ALT键,false表示没有 |
| button | Integer | R/W | 对于特定的鼠标事件,表示按下的鼠标按钮 0 –未按下按钮 1-按下左键 2-按下右键 3-同时按下左右按钮 4-按下中键 5-按下左键和中键 6-按下右键和中键 7-同时按下左中右键 |
| cancelBubble | Boolean | R/W | 将其设为true时,将会停止事件向上冒泡 |
| clientX | Integer | R/W | 事件发生时,鼠标在客户端区域(不包含工具条,滚动条等)的X坐标 |
| clientY | Integer | R/W | 事件发生时,鼠标在客户端区域(不包含工具条,滚动条等)的Y坐标 |
| ctrlKey | Boolean | R | true表示按下CTRL键,false表示没有 |
| fromElement | Element | R/W | 某鼠标事件中,鼠标所离开的元素 |
| keyCode | Integer | R/W | 对于Keypress事件,表示按下按钮的Unicode字符.对于keydown/keyup事件 ,表示按下按钮的数字代号 |
| offsetX | Integer | R/W | 鼠标相对于引起事件的对象的X坐标 |
| offsetY | Integer | R/W | 鼠标相对于引起事件的对象的Y坐标 |
| repeat | Boolean | R | 如果不断触发keydown事件,则为true,否则为false |
| returnValue | Boolean | R/W | 开发人员将其设置为false以取消事件的默认动作 |
| screenX | Integer | R/W | 相对于整个计算机屏幕的鼠标的X坐标 |
| screens | Integer | R/W | 相对于整个计算机屏幕的鼠标的Y坐标 |
| shiftKey | Boolean | R/W | true表示按下shift键,否则为false |
| srcElement | Element | R/W | 引起事件的元素 |
| toElement | Element | R/W | 在鼠标事件中,鼠标正在进入的元素 |
| type | String | R/W | 事件的名称 |
| x | Integer | R/W | 鼠标相对于引起事件的元素的父元素的X坐标 |
| y | Integer | R/W | 鼠标相对于引起事件的元素的父元素的Y坐标 |
DOM事件对象包含的属性和方法
| 特性 | 类型 | 可读/可写 | 描述 |
| altKey | Boolean | R/W | ture表示按下ALT键,false表示没有 |
| bubbles | Boolean | R | 表示事件是否正在冒泡阶段中 |
| button | Integer | R | 对于特定的鼠标事件,表示按下的鼠标按钮 0 –未按下按钮 1-按下左键 2-按下右键 3-同时按下左右按钮 4-按下中键 5-按下左键和中键 6-按下右键和中键 7-同时按下左中右键 |
| cancelBubble | Boolean | R/W | 将其设为true时,将会停止事件向上冒泡 |
| calcellabel | Boolean | R | 表示事件能否取消 |
| charCode | Integer | R | 按下的按键的Unicode值 |
| clientX | Integer | R | 事件发生时,鼠标在客户端区域(不包含工具条,滚动条等)的X坐标 |
| clientY | Integer | R | 事件发生时,鼠标在客户端区域(不包含工具条,滚动条等)的Y坐标 |
| ctrlKey | Boolean | R | true表示按下CTRL键,false表示没有 |
| currentTarget | Element | R | 事件目前所指向的元素 |
| detail | Integer | R | 鼠标按镇民点击的次数 |
| fromElement | Element | R | 某鼠标事件中,鼠标所离开的元素 |
| keyCode | Integer | R | 对于Keypress事件,表示按下按钮的Unicode字符.对于keydown/keyup事件 ,表示按下按钮的数字代号 |
| pageX | Integer | R | 鼠标相对于页面的X坐标 |
| pageY | Integer | R | 鼠标相对于页面的Y坐标 |
| preventDefault | Function |
| 调用此方法来阻止事件的默认行为 |
| relatedTarged | Element | R | 事件的第二,经常用于鼠标事件 |
| eventPhase | Integer | R | 事件的阶段,可能是以下值中的一个 0 捕获阶段 1 在目标上 2 冒泡阶段 |
| screenX | Integer | R | 相对于整个计算机屏幕的鼠标的X坐标 |
| screens | Integer | R | 相对于整个计算机屏幕的鼠标的Y坐标 |
| shiftKey | Boolean | R | true表示按下shift键,否则为false |
| isChar | Boolean | R | 表示按下的按键是否有字符与之相关 |
| stopPropagetion() | Function | R | 阻止将来事件冒泡 |
| type | String | R/W | 事件的名称 |
| target | Element | R | 引起事件的元素/对象 |
| timestamp | Long | R | 事件发生的时间 |
IE和DOM事件的相似性
a) 获取事件的类型
function hadleEvent(oEvent)
{
if(oEvent.type == “click”)
{}
else if(oEvent.type == “mouseOver”){}
}
b) 获取按键代码(keydow/keyup事件)
var iKeyCode = oEvent.keyCode
回车键:13 空格键:32 回退键:8
c) 检测Shift,Alt,Ctrl键
var bShift = oEvent.shifKye;
var bAlt = oEvent.altKey;
var bCtrl = oEvent.ctrlKey
d) 获取客户端坐标
var iClientX = oEvent.clientX;
var iClientY = oEvent.clientY;
e) 获取屏幕坐标
var iScreenX = oEvent.screenX;
var iScreenY = oEvent.screenY;
IE和DOM区别
1) 获取目标
IE; var oTarget = oEvent.srcElement;
DOM:var oTarget = oEvent.target;
2) 获取这符代码
3) 阻止某个事件的默认行为
IE: oEvent.returnValue = false;
DOM.oEvent.preventDefault()
阻止使用上下文菜单
document.body.oncontextmenu = function(oEvent)
{
if(isIE) {
oEvent = window.event
oEvent.returnValue = false;
}
else
{
oEvent.preventDefault()
}
}
4) 停止事件复制(冒泡)
IE中要阻止事件进一步冒泡,须设置cancelButle属性为true
oEvent.cancelBubble = true;
事件类型
click
dblclick 双击事件
mousedown 用户点击鼠标按钮时发生
mouseout 鼠标指针在某个元素上,且用户正要将其移出元素的边界时发生
mouseover 鼠标移出某个元素,到另一个元素上时发生.
mouseup 松开任意一个按钮时发生
mousemove 鼠标在某个元素上时持续发生
function handleEvent(oEvent)
{
var oTextbox = document.getElementById("txt1");
oTextbox.value += "/n"+oEvent.type;
}
<div style="width:100px;height:100px;background-color:red"
οnmοuseοver="handleEvent(event)"
οnmοuseοut="handleEvent(event)"
οnmοusedοwn="handleEvent(event)"
οnmοuseup="handleEvent(event)"
οnclick="handleEvent(event)"
οndblclick="handleEvent(event)" id="div11"></div>
改变图片
<img src=”imge1.gif” οnmοuseοver=”this.src=’image2.gif’”
οnmοuseοut=”this.src=’image1.gif’”/>
键盘事件
keydown
keypress(不管shift,alt之类的键)
keyup
HTML事件
load事件 //页面载入后,在window对象上触发;所有框架都载入后,在框架上触发;<img/>完全载入后触发.
unload事件//页面卸载后,在window对象上触发;所有框架都卸载后,在框架上触发;<img/>完全卸载后触发.
abort事件 用户停止下载过程时
error事件 JavaScript脚本出错时,在window对象上触发.某个<img>的指定图像无法载入时,在其触发,或是框架集中的一个或多个框架无法载入时触发.
select事件用户选择了文本框中的一个或多个字符时触发(<input/>或</textarea./>)
change事件 文本框((<input/>或</textarea./>)失去焦点时并且在它获取焦点后内容发生过改变时触发.
submit事件:点击提交按钮时(<input type=”submit”/>,在form上触发
reset事件:点击重置按钮(input type=”reset”/>时,在form上触发
scroll事件 :用户在任何带滚动条的元素上卷动它时触发.<body/>元素包含载入页面时滚动条.
focus事件上:任何元素或者窗口本身获取焦点时(用户点击它,Tab键切换到它或者任何其他与它交互的手段)触发.
blur事件:任何元素或者窗口本身失去焦点时触发
16. 样式表
IE提供一个style对象来管理元素CSS样式
div id="div2" style="background-color:red;height:50px;width:50px"
οnmοuseοver="this.style.backgroundColor = 'blue'"
οnmοuseοut="this.style.backgroundColor = 'red'"></div>
自定义鼠标提示
function showTim(oEvent)
{
var oDiv = document.getElementById("divTip");
oDiv.style.visibility = "visible"
oDiv.style.left = oEvent.clientX + 5;
oDiv.style.top = oEvent.clientY + 5;
}
function hideTim(oEvent)
{
var oDiv = document.getElementById("divTip");
oDiv.style.visibility = "hidden"
}
<div id="divTip"style="background-color:yellow;position:absolute;visibility:hidden;padding:5px">
<span style="font-weight:bold">custom Tooltip</span>
<br/>
more details can go here
</div>
可折叠区域
function toggle(sDivId){
var oDiv = document.getElementById(sDivId);
oDiv.style.display=(oDiv.style.display == "none")?"block":"none";
}
<div style="background-color:blue;color:white;font-weight:bold;padding:5px;cursor:pointer"
οnclick="toggle('divContent1')">Click Here</div>
<div style="border:3px solid blue;height:100px;padding:10px" id="divContent1">this is some content to show and hide.</div>
innerText 用来修改起始标签和结束标签之间的文本
innerHTML 直接给HTML分配HTML字符串
outText 将删除标签本身并把它替换成文本的节点
outHTML 将删除标签本身并把它替换当前的标签
17. 表单和数据完整性
获取表单的引用
var aForm = document.getElementById(“form1”)
或 document.forms[0]
或document.forms[“form1”]
访问表单字段
var oFirstField = oForm.elements[0] //get the first form field
或var oTextbox1 = oForm.elements[“textbox1”]//get the field with the name “textbox1”
或 var oTextbox1 = oForm.textbox1;
表单字段的共性
disabled
form 用来指向字段所在的表单
blur()方法可以使表单字段失去焦点
focus()方法可以使表单字段获取焦点
var oField1 = oForm.elements[0];
var oField2 = oForm.elements[1];
oField1.disabled = true;
oField2.focus();
alert(oField1.form == oForm) ;//outputs “true”
聚焦于第一个字段
在页面的onload事件中写如下代码
document.forms[0].elements[0].focus();
下面是一种通用的方法
FormUtil.focusOnFirst = function()
{
if(document.forms.length > 0)
for(var i=0; I < document.forms[0].elements.lenght;i++)
{
var oField = document.forms[0].elements[i];
if(oField.type != “hidden”)
{
oField.focus()
return;
}
}
}
表单提交
用<input type=”submit” value=”Submit”/>按钮
或用submit()方法
表单仅提交一次
<input type=”button” value=”Submit” οnclick=”this.disabled=true;this.form.submit()”/>
选择文本
function selectText()
{
var oTextbox = document.getElementById(“txt1”);
oTextbox.focus()
oTextbox.select();
}
文本框事件
change
select
自动选择文本
<input type=”text” οnfοcus=”this.select()”/>
<textarea οnfοcus=”this.select()”/>
自动切换到下一个元素
function tabForward (oTextBox)
{
var oForm = oTextBox.form;
//make sure the textbox is not the last field in the form
if(oForm.elements[oForm.elements.length -1] != oTextBox && oTextBox.value.length == oTextBox.getAttribute(“maxlenght”))
{
for(var i= 0; i< oForm.elements.length; i++)
{
if(oForm.elements[i] == oTextBox)
{
for(var j= i+1; j<oForm.elements.length; j++)
{
if(oForm.elements[j].type != “hidden”
{
oForm.elements[j].focus();
return;
}
}
}
}
}
}
<input type=”text” id=”txtAreaCode” maxlenght=”3” οnkeyup=” tabForward(this)”/>
限制textarea的字段数
var TextUtil = new Object();
TextUtil.isNotMax = function(oTextArea)
{
return oTextArea.value.length !=oTextArea.getAttribute(“maxlength”);
}
<textarea id="txt1" rows="15" cols="50" maxlength="20" οnkeypress="return TextUtil.isNotMax(this)"/>
允许/阻止文本框的字符
阻止无效的字符
TextUtil.blockChars = function (oTextbox, oEvent)
{
var invalidChars = oTextbox.getAttribute("invalidchars");
var reg = //d/d/
var cChar = String.fromCharCode(oEvent.charCode)
return reg.test(cChar);
}
<input type="text" invalidchars="0123456789" οnkeypress="TextUtil.blockChars(this,event)"/>
2295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
