表单处理[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();
}
}

-------------------------------------------------------------------------------------------------

//跨浏览器添加事件

function addEvent(obj,type,fn){

if(obj.addEventListener){

obj.addEventListener(type,fn,false);

}else if(obj.attachEvent){

obj.attachEvent('on'+type,fn);

}

//跨浏览器移除事件

function removeEvent(obj,type,fn){

if(obj.removeEventListener){

obj.removeEventListener(type,fn,false);

}else if(obj.detachEvent){

obj.detachEvent('on'+type,fn);

}

//跨浏览器阻止默认行为

function preDef(evt){

var e=evt||window.event;

if(e.preventDefault){

e.preventDefault();

}else{

e.returnValue=false;

}

//跨浏览器获取目标对象

function getTarget(evt){

if(evt.target){ //W3C

return evt.target;

}else if(window.event.srcElement){ //IE

return window.event.srcElement;

}

addEvent(window,'load',function(){

var fm=document.getElementById('myForm');

var user=fm.elements['user'];

var content=fm.elements['content'];

//select事件

addEvent(user,'select',function(){

//针对W3C

// alert(this.value);

// alert(this.selectionStart);

// alert(this.selectionEnd);

// alert(this.value.substring(this.selectionStart,this.selectionEnd));

//针对IE8及以下

//alert(document.selection.createRange().text);

document.getElementById('p').innerHTML=getSelectText(user);

})

function getSelectText(text){

if(typeof text.selectionStart=='number'){

text.value.substring(text.selectionStart,text.selectionEnd);

}else if(document.selection){ //IE

return document.selection.createRange().text;

}

//非IE选定文本且释放鼠标后触发select事件

//IE是只要选定了一个字符，就触发select事件，但你的速度比较快，就可以选择多个，但不稳定

//document.selection对象可以选择

//document.selection有一个方法可以创建文本范围对象：createRange();

//createRange()有一个属性是text，可以得到你选择的文本

})

</script>

<body>

姓名：<input type="text" name="user" value="123"/>

<textarea name="content">textarea</textarea>

</form>

</body>

posted @ 2017-09-15 10:19 耿鑫阅读(111) 评论(0) 收藏举报

刷新页面返回顶部

耿鑫

表单处理[3]

公告