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

-------------------------------------------------------------------------------------------------
 
<script>
//跨浏览器添加事件
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>
<form id="myForm" name="yourForm">
姓名:<input type="text" name="user" value="123"/>
<p id="p"></p>
<textarea name="content">textarea</textarea>
</form>
</body>
posted @ 2017-09-15 10:19  耿鑫  阅读(109)  评论(0编辑  收藏  举报