1.1 文本框

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" id="myTxt" onchange="showValue()"/>
JS代码:
function showValue(){
    alert(document.getElementById("myTxt").value);
}

1.1.4.2 获得焦点
onfocus用于监控文本框的获得焦点事件，当文本框获得焦点时此事件被触发
页面代码:
<input type="text" id="myTxt" onfocus="selectAll()"/>
JS代码:
function selectAll(){
    document.getElementById("myTxt").select();
}

1.1.4.3 失去焦点
onblur用于监控文本框的失去焦点事件，当文本框失去焦点时此事件被触发
<input type="text" id="myTxt" onblur="showLength()"/>
JS代码:
function showLength(){
    alert(document.getElementById("myTxt").value.length);
}

1.1.4.4 按键
onkeypress用于监控文本框的按键事件，当文本框有键入内容时此事件被触发。
下面是当文本框按下回车键时做出反应的代码，这个处理常用于登录框输入密码后按回车提交处理
页面代码:
<input type="password" 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" 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;
    }
}

 

版权所有，转载请说明作者及出处.

2016年7月25日20:54:59