表单
<texttarea>指定文本框的大小使用rows和cols，rows是文本框的字符行数，cols是字符列数，<texttarea>的初始值必须放在<texttarea></texttarea>之间。
<textarea>不能再html中给<texttarea>指定最大字符数
建议使用value属性读取或设置文本框的值，不建议使用DOM方法。不要使用setAttribute设置<input?>的value特性，也不要去修改<texttarea>的第一个子节点，因为value属性所作的修改，不一定回复暗影在DOM中，因此，在处理文本框的值时，最好不要使用DOM方法
选择文本框
html
<form id="form"> <input type="button" id="btn" value="hello"/> <input type="text" autofocus id="text1"/> <input type="text" autofocus id="text2"/> <input type="text" autofocus name="textbox1"/> <textarea cols="2" role="2">sdf</textarea> </form>
javascript
//选择文本
var textbox = document.forms[0].elements[1];
EventUtil.addHandler(textbox,'focus',function(event) {
event = EventUtil.getEvent();
var target = EventUtil.getTarget(event);
target.select();
})
selectionStart
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="form">
<input type="button" id="btn" value="hello"/>
<input type="text" id="text1" value="12312312312"/>
<input type="text" id="text2"/>
<input type="text" name="textbox1"/>
<textarea cols="2" role="2">sdf</textarea>
</form>
<select id="province">
<option value="-1">省</option>
<option value="0">北京</option>
<option value="1">浙江</option>
</select>
<select id="city">
</select>
<script>
var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
removeHandler: function (element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
},
getEvent: function (event) {
return event ? event : window.event;
},
getTarget: function (event) {
return event.target || event.srcElement;
},
preventDefault: function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubbles = true;
}
},
getRelatedTarget: function (event) {
if (event.relatedTarger) {
return event.relatedTarget;
} else if (event.toElement) {
return event.toElement;
} else if (event.fromElement) {
return event.fromElement;
} else { return null; }
}
};
window.onload = function() {
//选择文本
var f = document.forms[0].elements[1];
var text2 = document.getElementById('text2');
function getSelectedText(textbox) {
return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
}
f.addEventListener('select',function(){
text2.value = getSelectedText(f)
}, false);
}
</script>
</body>
</html>
上面的在IE7就会报错，可以这么写js
javascript
var f = document.forms[0].elements[1];
var text2 = document.getElementById('text2');
function getSelectedText(textbox) {
// return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
if (typeof textbox.selectionStart == 'number') {
return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
} else if (document.selection) {
return document.selection.createRange().text;
}
}
f.onselect = function(){
text2.value = getSelectedText(f)
}
事件过滤，所有按键都被屏蔽，文本框变成了只读
var f = document.forms[0].elements[1];
EventUtil.addHandler(f,'keypress',function(event) {
event = EventUtil.getEvent(event);
// EventUtil.preventDefault(event);
var target = EventUtil.getTarget(event);
var charCode = EventUtil.getCharCode(event);
if(!/\d/.test(String.fromCharCode(charCode)) && charCode > 9) {
EventUtil.preventDefault(event);
}
});
自动切换焦点，比如电话号码输入的时候有区号
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="form">
<input type="button" id="btn" value="hello"/>
<input type="text" id="text1" value=""/>
<input type="text" id="text2"/>
<input type="text" name="textbox1"/>
<textarea cols="2" role="2">sdf</textarea>
<input type="text" id="txtTel1" name="tel1" maxlength="3" required/>
<input type="text" id="txtTel2" name="tel2" maxlength="3"/>
<input type="text" id="txtTel3" name="tel3" maxlength="4"/>
</form>
<select id="province">
<option value="-1">省</option>
<option value="0">北京</option>
<option value="1">浙江</option>
</select>
<select id="city">
</select>
<script>
var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
removeHandler: function (element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
},
getEvent: function (event) {
return event ? event : window.event;
},
getTarget: function (event) {
return event.target || event.srcElement;
},
preventDefault: function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubbles = true;
}
},
removehandler: function(element,type,handler){
if(element.removeEventListenter){
element.addEventListenter(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on" +type] = null;
}
},
getRelatedTarget: function (event) {
if (event.relatedTarger) {
return event.relatedTarget;
} else if (event.toElement) {
return event.toElement;
} else if (event.fromElement) {
return event.fromElement;
} else { return null; }
},
getCharCode: function(event){
if (typeof event.charCode == "number"){
return event.charCode;
} else {
return event.keyCode;
}
}
};
window.onload = function() {
// 自动切换焦点
(function () {
function tabForward(event){ //event事件对象传到事件处理程序中去
event = EventUtil.getEvent(event); //把event传给getEvent()方法
var target = EventUtil.getTarget(event);
if(target.value.length == target.maxLength) { //达到最大长度
var form = target.form;
for(var i=0, len=form.elements.length; i<len-1; i++)
{
if(form.elements[i] == target){
form.elements[i+1].focus(); //切换焦点
return;
}
}
}
}
var textBox1 = document.getElementById('txtTel1');
var textBox2 = document.getElementById('txtTel2');
var textBox3 = document.getElementById('txtTel3');
EventUtil.addHandler(textBox1,'keyup',tabForward);
EventUtil.addHandler(textBox2,'keyup',tabForward);
EventUtil.addHandler(textBox3,'keyup',tabForward);
})();
}
</script>
</body>
</html>
