表单处理[3]
value 的获取
<form id="myForm" name="yourForm">
姓名:<input type="text" name="user" value="123"/>
<textarea name="content">textarea</textarea>
</form>
addEvent(window,'load',function(){
var fm=document.getElementById('myForm');
var user=fm.elements['user'];
var content=fm.elements['content'];
alert(user.value); //HTML DOM 获取
alert(content.value);
//PS:在HTML中input有value属性,textarea没有value属性
//PS:在js中input和textarea都有value属性
})
addEvent(window,'load',function(){
var fm=document.getElementById('myForm');
var user=fm.elements['user'];
var content=fm.elements['content'];
//使用标准DOM获取
// alert(user.getAttribute('value'));
// alert(content.getAttribute('value')); //null 兼容性会有问题,IE可以获取,非IE获取不到
// alert(user.getAttribute('value')); //标准DOM无法获取更改后的value 不建议使用标准DOM
// alert(user.value); //HTML DOM 可以获取更改后的value
// alert(user.defaultValue); //获取一开始的value值,不会改变
// user.select(); //选定文本,选择全部文本
//选择部分文本
// user.setSelectionRange(0,1); //从第0个位置到第1个位置的文本 IE8及以下不支持
//选定文本,选择全部文本
// user.setSelectionRange(0,user.value.length); //IE8及以下不支持
// user.focus();//焦点移入
//IE文本范围的概念,这个只是,没有讲过,先简单讲一下
//W3C也有一个范围的概念,叫做DOM范围,以后
// 除了IE,其它浏览器都支持这种写法(IE9+支持),那么IE想要选择部分文本,可以使用IE的范围操作。
var range=user.createTextRange(); //range对象,文本范围
range.collapse(true); //将文本指针移到开头
range.moveStart('character',0); //逐字移动,0
range.moveEnd('character',1); //同上,选择1个
range.select();
// PS: 非IE从第N个到第M个位置
// IE是从第N个开始选择M个
})
下面做兼容:
跨浏览器选定部分文本
addEvent(window,'load',function(){
var fm=document.getElementById('myForm');
var user=fm.elements['user'];
var content=fm.elements['content'];
getSelectText(user,2,3);
});
function getSelectText(text,start,num){
if(text.setSelectionRange){
text.setSelectionRange(start,num); //从第start个位置到第num个位置的文本 IE8及以下不支持
text.focus();
}else if(text.createTextRange){
var range=text.createTextRange(); //range对象,文本范围
range.collapse(true); //将文本指针移到开头
range.moveStart('character',start); //逐字移动,start开始位置
range.moveEnd('character',num-start); //同上,选择num-start个 用最后的位置-开始的位置=个数
range.select();
}
}