14.2.1選擇文本、取得選擇的文本、選擇部分文本

時間 2019-11-21

標籤 14.2.1 選擇文本取得部分简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Document</title>
</head>
<body>
<p id='p'>test<p>
<form> 
    <input type='submit' value='Submit Form' >
</form>
<form>  
    <button type='submit' name="submit-btn" autofocus>Submit Form</button>
</form>
<form name='form2'>
    <input type='image' src='2.jpg' width='15%'height='15%'>
</form>
<form>
    <input type='reset' value='Rest From'>
    <button type='reset'>Rest From</button>
</form>
<form>
    <select>
      <option value ="volvo">Volvo</option>
      <option value ="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
</form>
<form>
    <!-- 
        行間添加JavaScript代碼，解決IE下mouseout不能取消焦點問題
        標準下得到焦點能夠select()取消焦點blur()
        非標準下得到焦點select()取消焦點 this.value = this.value
    -->
    <input id="txtId" type="text" value="over out"  onmouseover="javascript:this.select();" onmouseout="javascript:this.blur()||(this.value=this.value);"/>
</form>
<form>
    <textarea rows='15' cols='15' style='resize:none'>121545sd2154521212312313213</textarea>
</form>

<script type="text/javascript">
    var EventUtil = {
            addHandler: function(element,type,handler){//添加事件
                if (element.addEventListener)
                {
                    element.addEventListener(type,handler,false);
                }else if (element.attachEvent)
                {
                    element.attachEvent('on'+type,function(){
                        //作的IE兼容
                        handler.call(element);
                    });
                }else {
                    element['on'+type] = handler;
                }
            },
            getEvent: function(event){//得到事件對象
                return event || window.event;
            },
            getTarget: function(event){//得到事件元素
                return event.target || event.srcElement;
            },
            preventDefault: function(){//取消默認事件行爲
                if (event.preventDefault)
                {
                    event.preventDefault();
                }else {
                    event.returnValue = false;
                }
            },
            removeHandler: function(element,type,handler){//取消事件
                if (element.removeEventListener)
                {
                    element.removeEventListener(type,handler,false)
                }else if (element.dettchEvent)
                {
                    element.dettchEvent('on'+type,handler);
                }else {
                    element['on'+type] = null;
                }
            },
            stopPropagation: function(event){//取消冒泡機制
                if (event.stopPropagation)
                {
                    event.stopPropagation();
                }else {
                    event.cancleBubble = true;
                }
            },
            getRelatedTarget: function(event){
                if (event.relatedTarget)
                {
                    return event.relatedTarget;//標準下返回相關元素
                }else if (event.toElement)
                {
                    return event.toElement;//mouseout事件觸發，保存相關元素
                }else if (event.fromElement)
                {
                    return event.fromElement;//mouseover事件觸發，保存相關元素
                }
            },
            getButton: function(event){//鼠標按鈕兼容
                if (document.implementation.hasFeature('MouseEvents','2.0'))//標準下
                {
                    return event.button;
                }else {
                    switch (event.button)//非標準下
                    {
                    case 0:
                    case 1:
                    case 3:
                    case 5:
                    case 7:
                        return 0;
                    case 2:
                    case 6:
                        return 2;
                    case 4:
                        return 1;
                    }
                }
            },
            getWheelDelta: function(event){//滾輪事件兼容
                //因此要兼容，寫兩個函數函數
                //client的兼容性必須先寫出來
                if (event.wheelDelta)
                {
                    /*
                        兼容opear9.5之前版本的正負相反，mousewheel
                    */
                    return (window.client.engine.opera && window.client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
                }else {
                    /*
                        兼容firefox正負和3的倍數的問題，DOMMouseScroll
                    */
                    return -event.detail*40;
                }
            },
            getCharCode: function(event){//鍵盤事件兼容
                if (typeof event.charCode == 'number')//首先檢測按鍵有沒有表明的字符，若是沒有就沒有charCode，爲undefined
                {
                    return event.charCode;
                }else {
                    return event.keyCode
                }
            }
        };
    var af = document.forms;
    /*
    function sub(event){
     event = EventUtil.getEvent(event);
     var target = EventUtil.getTarget(event);
    //target.elements得到是一個集合能夠用下表取得也能夠用名字得到    
     var btn = target.elements['submit-btn'];
     document.body.innerHTML += btn ;
     //禁用提交
     btn.disable = true;
    }
    EventUtil.addHandler(af[1],'submit',sub)
    
    //刷新網頁設置聚焦的元素
    //若是input元素type屬性爲hidden或css的display和visibility屬性隱藏了該字段，一樣也會致使錯誤
    EventUtil.addHandler(window,'load',function(event){
        document.forms[1].elements['submit-btn'].focus();
    });

    //元素能夠添加autofocus來自動聚焦，若是添加了ele.autofocus === true
    //檢測是否設置了autofocus,autofocus是布爾值
    EventUtil.addHandler(window,'load',function(event){
        var element = document.forms[1].elements['submit-btn'];
        if (element.autofocus !== true)
        {
            element.focus();
            console.log( 'JS focus' );
        }
    });
    //得到焦點，而後文本框變色，或者觸發change事件，檢測輸入的內容是否合法
    var textBox = document.forms[document.forms.length-1].elements[0];
    console.log( textBox );
    EventUtil.addHandler(textBox,'focus',change1);
    EventUtil.addHandler(textBox,'blur',change2);
    EventUtil.addHandler(textBox,'change',change3);
    function change1(event){
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        if (target.style.background === '')
        {
            target.style.background = 'yellow';
        }
    }
    function change2(event){
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        if (/[^\d]/.test(target.value))
        {
            target.style.background = 'red';
            
        }else {
            target.style.background = '';
        }
    }

    function change3(event){
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        console.log(1)
        if (/[^\d]/.test(target.value))
        {
            target.style.background = 'red';
        }else {
            target.style.background = '';
        }
    }
   */
    
    /*
    //非標準下聚焦的觸發事件
    var textBox = af[af.length-1].elements[0];
    EventUtil.addHandler(textBox,'focus',change);
    
    function change(event){
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        target.select();
    }
    */
    //這裏不能使用select觸發，雖然標準下能夠正常，可是IE兼容的不行他會在剛一觸發就執行
    //因此只能用mouseup觸發
    var textBox = af[af.length-1].elements[0];
    EventUtil.addHandler(textBox,'mouseup',fn);
    function fn(event){
        var that = this;
        //ie兼容
        var a = compa(that);
        alert(a);
    }
    //兼容函數
    function compa(that){
            if (typeof that.selectionStart === 'number')
            {
                return that.value.substring(that.selectionStart,that.selectionEnd);
            }else {
                //document.selection.createRange()爲一個對象
                return document.selection.createRange().text;
            }    
    }
    
    alert(blur in window)
</script>
</body>
</html>

選擇部分文本javascript

標準下的實現方法：css

var textBox = document.forms[0].elements[0];
    //在調用setSelectionRange()以前或以後當即將焦點設置到文本上
    EventUtil.addHandler(textBox,'dblclick',fn)
    function fn(event){
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        target.setSelectionRange(0,textBox.value.length);
    }

非標準下的實現方法（ie8如下）html

var textBox = document.forms[0].elements[0];
    var range = textBox.createTextRange();//建立一個對象並指定其範文
    
    range.collapse(true);//選擇全部的文本
    range.moveStart('character',0);//以字符爲單位，從0位開始 它指定的單位有character(字符)、word(詞)、sentence(段落)、textedit
    range.moveEnd('character',textBox.value.length);//以字符爲單位，最後一位
    range.select();//xuanze

JS moveStart和moveEnd方法(TextRange對象--查找與選擇)詳解

boundingHeight 獲取綁定TextRange對象的矩形的高度
boundingLeft 獲取綁定TextRange 對象的矩形左邊緣和包含TextRange對象的左側之間的距離
offsetLeft 獲取對象相對於版面或由offsetParent屬性指定的父座標的計算左側位置
offsetTop 獲取對象相對於版面或由offsetParent屬性指定的父座標的計算頂端位置
htmlText 獲取綁定TextRange對象的矩形的寬度
text 設置或獲取範圍內包含的文本
方法
moveStart 更改範圍的開始位置
moveEnd 更改範圍的結束位置
collapse 將插入點移動到當前範圍的開始或結尾
move 摺疊給定文本範圍並將空範圍移動給定單元數
execCommand 在當前文檔、當前選中區或給定範圍上執行命令
select 將當前選擇區置爲當前對象
findText 在文本中搜索文本並將範圍的開始和結束點設置爲包圍搜索字符串。

使用TextRange對象一般包括三個基本的步驟:

1.建立文本範圍
2.設置開始點和結束點
3.對範圍進行操做java

兼容版本函數

var textbox = document.forms[0].elements[0];
    function selectText(textbox,startIndex,stopIndex){
        //爲的是在填入的值爲負值時，顯示一致
        startIndex = startIndex < 0 ? -startIndex : startIndex;
        stopIndex = stopIndex < 0 ? textbox.value.length : stopIndex;
        
        if (textbox.setSelectionRange)
        {
            textbox.setSelectionRange(startIndex,stopIndex);
        }else if (textbox.createTextRange)
        {
            var range = textbox.createTextRange();
            range.collapse(true);
            range.moveStart('character',startIndex);
            range.moveEnd('character',stopIndex - startIndex);
            range.select();
        }
        textbox.focus();
    }
    selectText(textbox,1,16)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。