1.1 文本框
1.1.1 基本形制
<input type="text" value="abcd"/>
1.1.1.2 常用属性
1.1.1.2.1 类型
type用于设置文本框的外观类型,type值为text表示该表单元素是文本框,为password表示该表单元素是密码框,为hidden表示该表单元素是隐藏框,为button则表示该表单元素是按钮控件
1.1.1.2.2 值
value用于存取文本框中的文字,同时写在html代码里的value也是文本框的默认值,可以由defaultValue属性获得
1.1.1.2.3 最大字符数
maxLength用于设置文本框中所允许的最大字符数
<input type="text" value="abcd" maxLength="8"/>
1.1.1.2.4 文本框宽度
size用于设置文本框的宽度,以字符计数.使用起来类似模糊控制,要想精确控制还是要用css设置style.width.
<input type="text" value="abcd" size="6"/>
1.1.1.2.5 默认值
defaultValue用于获得文本框的默认值,默认值是文本框value的原始值,这个值在书写代码时就确定了,不随用户输入而改变
取初始值的代码为
var txt=document.getElementById("myTxt");
alert(txt.defaultValue);
1.1.2 文本框的变种
1.1.2.1 密码框
<input type="password" value="1234"/>
1.1.2.2 只读框
<input type="text" value="abcd1234" readonly/>
1.1.2.3 隐藏域
<input type="hidden" value="3456"/>
1.1.3 常见JS对文本框的操作
1.1.3.1 JS取值
如果页面上有一个id为myTxt的文本框,则可调用其value属性获得文本框的内容,代码为
var txt=document.getElementById("myTxt");
alert(txt.value);
1.1.3.2 JS设值
如果页面上有一个id为myTxt的文本框,对其value赋值即设置了文本框的内容,代码为
var txt=document.getElementById("myTxt");
txt.value="ABCD1234";
1.1.3.3 JS动态创建文本框
下面代码是动态创建一个文本框,设置属性后将它添加到一个id为myDiv的div里。
var txt=document.createElement("input");
txt.type="text";
txt.value="4321";
txt.maxLength=6;
document.getElementById("myDiv").appendChild(txt);
1.1.3.4 动态给文本框增添事件
下面代码是动态创建一个文本框,设置属性后将它添加到一个id为myDiv的div里,并给它增加获得焦点时文本全选的效果。
function createTxt(){
var txt=document.createElement("input");
txt.type="text";
txt.value="4321";
txt.maxLength=6;
txt.setAttribute("onfocus","slectAllOn(this);");// 动态为文本框增添事件
document.getElementById("myDiv").appendChild(txt);
}
function slectAllOn(txt){
txt.select();
}
1.1.4 常见事件
1.1.4.1 值变化
onchange用于监控文本框的值变化,当文本框中值改变且焦点移走时此事件被触发
页面代码:
<input type="text" value="abcd" id="myTxt" onchange="showValue()"/>
JS代码:
function showValue(){
alert(document.getElementById("myTxt").value);
}
1.1.4.2 获得焦点
onfocus用于监控文本框的获得焦点事件,当文本框获得焦点时此事件被触发
页面代码:
<input type="text" value="abcd" id="myTxt" onfocus="selectAll()"/>
JS代码:
function selectAll(){
document.getElementById("myTxt").select();
}
1.1.4.3 失去焦点
onblur用于监控文本框的失去焦点事件,当文本框失去焦点时此事件被触发
<input type="text" value="abcd" id="myTxt" onblur="showLength()"/>
JS代码:
function showLength(){
alert(document.getElementById("myTxt").value.length);
}
1.1.4.4 按键
onkeypress用于监控文本框的按键事件,当文本框有键入内容时此事件被触发。
下面是当文本框按下回车键时做出反应的代码,这个处理常用于登录框输入密码后按回车提交处理
页面代码:
<input type="password" value="abcd" id="myTxt" onkeypress="return actWhenEnter(event)"/>
JS代码:
function actWhenEnter(evt){
evt=(evt)?evt:event;
var charCode=evt.charCode?evt.charCode:((evt.which)?evt.which:evt.keyCode)
if(charCode==13 || charCode==3 ){
alert("Enter key pressed");
return false;
}else{
return true;
}
}
对文本框加入以下处理能使文本框仅能允许输入数字
页面代码:
<input type="text" value="" id="myTxt" onkeypress="return onlyNumAllowed(event)"/>
JS代码:
function onlyNumAllowed(evt){
evt=(evt)?evt:event;
var charCode=evt.charCode?evt.charCode:((evt.which)?evt.which:evt.keyCode)
if(charCode>31 && (charCode<48 || charCode>57) ){
return false;
}else{
return true;
}
}