ใช้ JavaScript เพื่อวางเคอร์เซอร์ที่ส่วนท้ายของข้อความในองค์ประกอบการป้อนข้อความ

อะไรคือวิธีที่ดีที่สุด (และฉันคิดว่าเป็นวิธีที่ง่ายที่สุด) ในการวางเคอร์เซอร์ที่ท้ายข้อความในองค์ประกอบข้อความอินพุตผ่าน JavaScript - หลังจากที่โฟกัสไปที่องค์ประกอบแล้ว?

ฉันประสบปัญหาเดียวกันนี้ (หลังจากตั้งค่าโฟกัสผ่าน RJS / ต้นแบบ) ใน IE Firefox ได้ปล่อยเคอร์เซอร์ไว้ที่จุดสิ้นสุดเมื่อมีค่าสำหรับเขตข้อมูลอยู่แล้ว IE ถูกบังคับให้เคอร์เซอร์ไปที่จุดเริ่มต้นของข้อความ

วิธีแก้ปัญหาที่ฉันไปถึงมีดังนี้:

<input id="search" type="text" value="mycurrtext" size="30" 
       onfocus="this.value = this.value;" name="search"/>

ใช้ได้ทั้ง IE7 และ FF3

มีวิธีง่าย ๆ ในการทำให้เบราว์เซอร์ส่วนใหญ่ทำงานได้

this.selectionStart = this.selectionEnd = this.value.length;

อย่างไรก็ตามเนื่องจาก * quirks ของเบราว์เซอร์ไม่กี่คำตอบที่ครอบคลุมมากขึ้นจะมีลักษณะเช่นนี้มากขึ้น

setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);

ใช้ jQuery (เพื่อตั้งค่าฟัง แต่ไม่จำเป็นอย่างอื่น)

$('#el').focus(function(){
  var that = this;
  setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='el' type='text' value='put cursor at end'>

ใช้ Vanilla JS ( addEventฟังก์ชันการยืมจากคำตอบนี้ )

// Basic cross browser addEvent
function addEvent(elem, event, fn){
if(elem.addEventListener){
  elem.addEventListener(event, fn, false);
}else{
  elem.attachEvent("on" + event,
  function(){ return(fn.call(elem, window.event)); });
}}
var element = document.getElementById('el');

addEvent(element,'focus',function(){
  var that = this;
  setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);
});

<input id='el' type='text' value='put cursor at end'>

นิสัยใจคอ

Chrome มีมุมแปลก ๆ ที่เหตุการณ์การโฟกัสเริ่มทำงานก่อนที่เคอร์เซอร์จะถูกย้ายเข้าสู่สนาม ซึ่งแก้ปัญหาง่าย ๆ ของฉันขึ้น สองตัวเลือกในการแก้ไขปัญหานี้:

1. คุณสามารถเพิ่มการหมดเวลาเป็น 0 ms (เพื่อเลื่อนการทำงานจนกว่าสแต็กจะชัดเจน )
2. คุณสามารถเปลี่ยนกิจกรรมจากไปfocus mouseupมันจะค่อนข้างน่ารำคาญสำหรับผู้ใช้เว้นแต่คุณจะยังคงติดตามโฟกัส ฉันไม่ได้รักตัวเลือกเหล่านี้อย่างใดอย่างหนึ่ง

นอกจากนี้ @vladkras ยังชี้ให้เห็นว่า Opera รุ่นเก่าบางรุ่นคำนวณความยาวไม่ถูกต้องเมื่อมีช่องว่าง สำหรับสิ่งนี้คุณสามารถใช้จำนวนมากที่ควรจะใหญ่กว่าสตริงของคุณ

ลองสิ่งนี้มันได้ผลกับฉัน:

//input is the input element

input.focus(); //sets focus to element
var val = this.input.value; //store the value of the element
this.input.value = ''; //clear the value of the element
this.input.value = val; //set that value back.  

สำหรับเคอร์เซอร์ที่จะย้ายไปยังจุดสิ้นสุดอินพุตจะต้องมีการโฟกัสก่อนจากนั้นเมื่อมีการเปลี่ยนแปลงค่ามันจะไปสิ้นสุด หากคุณตั้งค่าเป็นค่าเดียวกันค่าดังกล่าวจะไม่เปลี่ยนแปลงในโครเมี่ยม

หลังจากแฮ็คไปสักพักหนึ่งฉันก็พบว่าวิธีที่ดีที่สุดคือใช้setSelectionRangeฟังก์ชั่นหากเบราว์เซอร์รองรับ ถ้าไม่กลับไปใช้วิธีการในคำตอบของ Mike Berrow (เช่นแทนที่ค่าด้วยตัวเอง)

ฉันกำลังตั้งค่าscrollTopสูงในกรณีที่เราอยู่ในแนวตั้งเลื่อนtextareaได้ (การใช้ค่าสูงตามอำเภอใจดูเหมือนว่าน่าเชื่อถือกว่า$(this).height()ใน Firefox และ Chrome)

ฉันทำมันเป็นปลั๊กอิน jQuery (หากคุณไม่ได้ใช้ jQuery ฉันเชื่อว่าคุณยังสามารถรับส่วนสำคัญได้ง่ายพอ)

ฉันทดสอบใน IE6, IE7, IE8, Firefox 3.5.5, Google Chrome 3.0, Safari 4.0.4, Opera 10.00

มันมีอยู่ใน jquery.com เป็นปลั๊กอิน PutCursorAtEnd เพื่อความสะดวกของคุณรหัสสำหรับการเปิดตัว 1.0 มีดังนี้:

// jQuery plugin: PutCursorAtEnd 1.0
// http://plugins.jquery.com/project/PutCursorAtEnd
// by teedyay
//
// Puts the cursor at the end of a textbox/ textarea

// codesnippet: 691e18b1-f4f9-41b4-8fe8-bc8ee51b48d4
(function($)
{
    jQuery.fn.putCursorAtEnd = function()
    {
    return this.each(function()
    {
        $(this).focus()

        // If this function exists...
        if (this.setSelectionRange)
        {
        // ... then use it
        // (Doesn't work in IE)

        // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
        var len = $(this).val().length * 2;
        this.setSelectionRange(len, len);
        }
        else
        {
        // ... otherwise replace the contents with itself
        // (Doesn't work in Google Chrome)
        $(this).val($(this).val());
        }

        // Scroll to the bottom, in case we're in a tall textarea
        // (Necessary for Firefox and Google Chrome)
        this.scrollTop = 999999;
    });
    };
})(jQuery);

<script type="text/javascript">  
    function SetEnd(txt) {  
      if (txt.createTextRange) {  
       //IE  
       var FieldRange = txt.createTextRange();  
       FieldRange.moveStart('character', txt.value.length);  
       FieldRange.collapse();  
       FieldRange.select();  
       }  
      else {  
       //Firefox and Opera  
       txt.focus();  
       var length = txt.value.length;  
       txt.setSelectionRange(length, length);  
      }  
    }   
</script>  

ฟังก์ชั่นนี้ใช้งานได้สำหรับฉันใน IE9, Firefox 6.x และ Opera 11.x

ฉันได้ลองทำสิ่งต่อไปนี้แล้วซึ่งประสบความสำเร็จอย่างยอดเยี่ยมในโครเมียม

$("input.focus").focus(function () {
    var val = this.value,
        $this = $(this);
    $this.val("");

    setTimeout(function () {
        $this.val(val);
    }, 1);
});

บทสรุปด่วน:

ใช้ทุกฟิลด์อินพุตที่มีคลาสโฟกัสอยู่จากนั้นเก็บค่าเก่าของฟิลด์อินพุตในตัวแปรหลังจากนั้นจะใช้สตริงว่างกับฟิลด์อินพุต

จากนั้นมันจะรอ 1 มิลลิวินาทีและใส่ค่าเดิมอีกครั้ง

มันเป็นปี 2019 และไม่มีวิธีการใดที่ได้ผลสำหรับฉัน แต่วิธีนี้ทำมาจากhttps://css-tricks.com/snippets/javascript/move-cursor-to-end-of-input/

function moveCursorToEnd(id) {
  var el = document.getElementById(id) 
  el.focus()
  if (typeof el.selectionStart == "number") {
      el.selectionStart = el.selectionEnd = el.value.length;
  } else if (typeof el.createTextRange != "undefined") {           
      var range = el.createTextRange();
      range.collapse(false);
      range.select();
  }
}

<input id="myinput" type="text" />
<a href="#" onclick="moveCursorToEnd('myinput')">Move cursor to end</a>

ง่าย เมื่อแก้ไขหรือเปลี่ยนแปลงค่าอันดับแรกให้วางโฟกัสแล้วตั้งค่า

$("#catg_name").focus();
$("#catg_name").val(catg_name);

ยังจำเป็นต้องใช้ตัวแปรกลาง (ดู var val =) หากเคอร์เซอร์ทำงานผิดปกติเราต้องการมันในตอนท้าย

<body onload="document.getElementById('userinput').focus();">
<form>
<input id="userinput" onfocus="var val=this.value; this.value=''; this.value= val;"
         class=large type="text" size="10" maxlength="50" value="beans" name="myinput">
</form>
</body>

el.setSelectionRange(-1, -1);

https://codesandbox.io/s/peaceful-bash-x2mti

เมธอดนี้อัพเดตคุณสมบัติ HTMLInputElement.selectionStart, selectionEnd และ selectionDirection ในการโทรครั้งเดียว

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange

ในวิธีการ js อื่น ๆ-1มักจะหมายถึง (ไป) ตัวอักษรตัวสุดท้าย นี่เป็นกรณีสำหรับสิ่งนี้เช่นกัน แต่ฉันไม่สามารถพูดถึงพฤติกรรมนี้ในเอกสารได้อย่างชัดเจน

สำหรับเบราว์เซอร์ทั้งหมดสำหรับทุกกรณี:

function moveCursorToEnd(el) {
    window.setTimeout(function () {
            if (typeof el.selectionStart == "number") {
            el.selectionStart = el.selectionEnd = el.value.length;
        } else if (typeof el.createTextRange != "undefined") {
            var range = el.createTextRange();
            range.collapse(false);
            range.select();
        }
    }, 1);
}

หมดเวลาใช้งานหากคุณต้องการย้ายเคอร์เซอร์จากตัวจัดการเหตุการณ์ onFocus

ฉันชอบคำตอบที่ได้รับการยอมรับมากมาย แต่มันก็หยุดทำงานใน Chrome ใน Chrome สำหรับเคอร์เซอร์เพื่อไปยังจุดสิ้นสุดค่าอินพุตต้องเปลี่ยน วิธีแก้ปัญหามีดังนี้:

<input id="search" type="text" value="mycurrtext" size="30" 
   onfocus="var value = this.value; this.value = null; this.value = value;" name="search"/>

ใน jQuery นั่นคือ

$(document).ready(function () {
  $('input').focus(function () {
    $(this).attr('value',$(this).attr('value'));
  }
}

ปัญหานี้น่าสนใจ สิ่งที่สับสนที่สุดเกี่ยวกับเรื่องนี้ก็คือไม่มีวิธีแก้ปัญหาที่ฉันพบว่าแก้ปัญหาได้อย่างสมบูรณ์

+++++++ โซลูชั่น +++++++

1. คุณต้องใช้ฟังก์ชัน JS เช่นนี้:

   function moveCursorToEnd(obj) {
   
     if (!(obj.updating)) {
       obj.updating = true;
       var oldValue = obj.value;
       obj.value = '';
       setTimeout(function(){ obj.value = oldValue; obj.updating = false; }, 100);
     }
   
   }

2. คุณต้องโทรหาผู้ชายคนนี้ในกิจกรรมออนโฟกัสและออนคลิก

   <input type="text" value="Test Field" onfocus="moveCursorToEnd(this)" onclick="moveCursorToEnd(this)">

มันทำงานบนอุปกรณ์ทั้งหมดที่เบราว์เซอร์ !!!!

ฉันเพิ่งพบว่าใน iOS การตั้งค่าtextarea.textContentคุณสมบัติจะวางเคอร์เซอร์ที่ท้ายข้อความในองค์ประกอบ textarea ทุกครั้ง พฤติกรรมเป็นข้อบกพร่องในแอปของฉัน แต่ดูเหมือนจะเป็นสิ่งที่คุณสามารถใช้โดยเจตนา

var valsrch = $('#search').val();
$('#search').val('').focus().val(valsrch);

จดคำตอบบางคำ .. สร้าง jquery บรรทัดเดียว

$('#search').focus().val($('#search').val());

หากช่องใส่เพียงแค่ต้องการค่าเริ่มต้นคงที่ฉันมักจะทำกับ jQuery:

$('#input').focus().val('Default value');

ดูเหมือนว่าจะใช้ได้กับทุกเบราว์เซอร์

แม้ว่านี่อาจเป็นคำถามเก่าที่มีคำตอบมากมาย แต่ฉันก็พบเจอปัญหาที่คล้ายกันและไม่มีคำตอบใดที่ฉันต้องการและ / หรืออธิบายได้ไม่ดีนัก ปัญหากับ selectionStart และ selectionEnd properties คือไม่มีอยู่สำหรับหมายเลขประเภทอินพุต (ในขณะที่คำถามถูกถามถึงประเภทข้อความฉันคิดว่ามันอาจช่วยคนอื่น ๆ ที่อาจมีประเภทอินพุตอื่น ๆ ที่พวกเขาต้องการโฟกัส) ดังนั้นหากคุณไม่ทราบว่าประเภทอินพุตฟังก์ชั่นจะโฟกัสเป็นหมายเลขประเภทหรือไม่คุณไม่สามารถใช้โซลูชันนั้นได้

โซลูชันที่ทำงานข้ามเบราว์เซอร์และสำหรับอินพุตทุกประเภทนั้นค่อนข้างง่าย

• รับและเก็บค่าของอินพุตในตัวแปร
• มุ่งเน้นการป้อนข้อมูล
• กำหนดค่าของอินพุตเป็นค่าที่เก็บไว้

ด้วยวิธีนี้เคอร์เซอร์จะอยู่ที่ส่วนท้ายขององค์ประกอบอินพุต
ดังนั้นสิ่งที่คุณต้องทำคือสิ่งนี้ (ใช้ jquery โดยมีตัวเลือกองค์ประกอบที่ผู้ใช้ต้องการโฟกัสสามารถเข้าถึงได้ผ่านแอตทริบิวต์ data 'data-focus-element' ขององค์ประกอบที่ถูกคลิกและฟังก์ชันจะทำงานหลังจากคลิก '.foo' ธาตุ):

$('.foo').click(function() {
    element_selector = $(this).attr('data-focus-element');
    $focus = $(element_selector);
    value = $focus.val();
    $focus.focus();
    $focus.val(value);
});

ทำไมจึงใช้งานได้ เพียงแค่เมื่อ. focus () ถูกเรียกโฟกัสจะถูกเพิ่มไปที่จุดเริ่มต้นขององค์ประกอบอินพุต (ซึ่งเป็นปัญหาหลักที่นี่) โดยไม่สนใจข้อเท็จจริงที่ว่าองค์ประกอบอินพุตมีค่าอยู่แล้ว อย่างไรก็ตามเมื่อค่าของอินพุตมีการเปลี่ยนแปลงเคอร์เซอร์จะถูกวางไว้ที่ส่วนท้ายของค่าภายในองค์ประกอบอินพุต ดังนั้นหากคุณแทนที่ค่าด้วยค่าเดียวกันกับที่เคยป้อนในอินพุตค่าจะดูไม่มีการแตะเคอร์เซอร์จะย้ายไปยังจุดสิ้นสุด

ลองอันนี้ใช้งานได้กับ Vanilla JavaScript

<input type="text" id="yourId" onfocus=" let value = this.value; this.value = null; this.value=value" name="nameYouWant" class="yourClass" value="yourValue" placeholder="yourPlaceholder...">

ในเจเอส

document.getElementById("yourId").focus()

ตั้งค่าเคอร์เซอร์เมื่อคลิกที่พื้นที่ข้อความถึงจุดสิ้นสุดข้อความ ... รูปแบบของรหัสนี้คือ ... ยังใช้งานได้! สำหรับ Firefox, IE, Safari, Chrome ..

ในรหัสฝั่งเซิร์ฟเวอร์:

txtAddNoteMessage.Attributes.Add("onClick", "sendCursorToEnd('" & txtAddNoteMessage.ClientID & "');")

ใน Javascript:

function sendCursorToEnd(obj) {
    var value =  $(obj).val(); //store the value of the element
    var message = "";
    if (value != "") {
        message = value + "\n";
     };
    $(obj).focus().val(message);
    $(obj).unbind();
 }

หากคุณตั้งค่าก่อนจากนั้นจึงตั้งโฟกัสเคอร์เซอร์จะปรากฏขึ้นที่ส่วนท้ายเสมอ

$("#search-button").click(function (event) {
    event.preventDefault();
    $('#textbox').val('this');
    $("#textbox").focus();
    return false;
});

นี่คือซอที่จะทดสอบ https://jsfiddle.net/5on50caf/1/

ฉันต้องการวางเคอร์เซอร์ที่ส่วนท้ายขององค์ประกอบ "div" ที่ contenteditable = true และฉันได้รับโซลูชันด้วยรหัส Xeoncross :

<input type="button" value="Paste HTML" onclick="document.getElementById('test').focus(); pasteHtmlAtCaret('<b>INSERTED</b>'); ">

<div id="test" contenteditable="true">
    Here is some nice text
</div>

และฟังก์ชั่นนี้ทำเวทย์มนตร์:

 function pasteHtmlAtCaret(html) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            // Range.createContextualFragment() would be useful here but is
            // non-standard and not supported in all browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);

            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != "Control") {
        // IE < 9
        document.selection.createRange().pasteHTML(html);
    }
}

ใช้งานได้ดีสำหรับเบราว์เซอร์ส่วนใหญ่โปรดตรวจสอบรหัสนี้วางข้อความและวางโฟกัสที่ส่วนท้ายของข้อความในองค์ประกอบ div (ไม่ใช่องค์ประกอบอินพุต)

https://jsfiddle.net/Xeoncross/4tUDk/

ขอบคุณ Xeoncross

ฉันยังประสบปัญหาเดียวกัน ในที่สุดนี้จะทำงานสำหรับฉัน:

jQuery.fn.putCursorAtEnd =  = function() {

  return this.each(function() {

    // Cache references
    var $el = $(this),
        el = this;

    // Only focus if input isn't already
    if (!$el.is(":focus")) {
     $el.focus();
    }

    // If this function exists... (IE 9+)
    if (el.setSelectionRange) {

      // Double the length because Opera is inconsistent about whether a carriage return is one character or two.
      var len = $el.val().length * 2;

      // Timeout seems to be required for Blink
      setTimeout(function() {
        el.setSelectionRange(len, len);
      }, 1);

    } else {

      // As a fallback, replace the contents with itself
      // Doesn't work in Chrome, but Chrome supports setSelectionRange
      $el.val($el.val());

    }

    // Scroll to the bottom, in case we're in a tall textarea
    // (Necessary for Firefox and Chrome)
    this.scrollTop = 999999;

  });

};

นี่คือวิธีที่เราสามารถเรียกสิ่งนี้:

var searchInput = $("#searchInputOrTextarea");

searchInput
  .putCursorAtEnd() // should be chainable
  .on("focus", function() { // could be on any event
    searchInput.putCursorAtEnd()
  });

มันใช้งานได้สำหรับฉันใน Safari, IE, Chrome, Mozilla บนอุปกรณ์มือถือฉันไม่ได้ลองสิ่งนี้

ตรวจสอบทางออกนี้!

//fn setCurPosition
$.fn.setCurPosition = function(pos) {
    this.focus();
    this.each(function(index, elem) {
        if (elem.setSelectionRange) {
            elem.setSelectionRange(pos, pos);
        } else if (elem.createTextRange) {
            var range = elem.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
        }
    });
    return this;
};

// USAGE - Set Cursor ends
$('#str1').setCurPosition($('#str1').val().length);

// USAGE - Set Cursor at 7 position
// $('#str2').setCurPosition(7);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Set cursor at any position</p>
<p><input type="text" id="str1" value="my string here" /></p>
<p><input type="text" id="str2" value="my string here" /></p>

ง่ายสุด (คุณอาจต้องมุ่งเน้นไปที่องค์ประกอบอินพุต)

inputEl = getElementById('inputId');
var temp = inputEl.value;
inputEl.value = '';
inputEl.value = temp;

ฉันลองใช้คำแนะนำก่อนหน้า แต่ไม่มีใครทำงานให้ฉัน (ทดสอบพวกเขาใน Chrome) ดังนั้นฉันจึงเขียนโค้ดของตัวเอง - และมันทำงานได้ดีใน Firefox, IE, Safari, Chrome ...

ใน Textarea:

onfocus() = sendCursorToEnd(this);

ใน Javascript:

function sendCursorToEnd(obj) { 
var value = obj.value; //store the value of the element
var message = "";
if (value != "") {
    message = value + "\n";
};
$(obj).focus().val(message);}

นี่คือตัวอย่างjsFiddleของคำตอบของฉัน ตัวอย่างนี้ใช้ CoffeeScript แต่คุณสามารถแปลงเป็น JavaScript ธรรมดาได้หากต้องการ

ส่วนที่สำคัญใน JavaScript:

var endIndex = textField.value.length;
if (textField.setSelectionRange) {
   textField.setSelectionRange(endIndex, endIndex);
}

ฉันโพสต์คำตอบนี้เพราะฉันเขียนไปแล้วสำหรับคนอื่นที่มีคำถามเดียวกัน คำตอบนี้ไม่ครอบคลุมถึงกรณีขอบจำนวนมากเป็นคำตอบด้านบนที่นี่ แต่มันเหมาะสำหรับฉันและมีการสาธิต jsFiddle คุณสามารถเล่นกับ

นี่คือรหัสจาก jsFiddle ดังนั้นคำตอบนี้จะถูกเก็บไว้แม้ว่า jsFiddle จะหายไป:

moveCursorToEnd = (textField) ->
  endIndex = textField.value.length
  if textField.setSelectionRange
    textField.setSelectionRange(endIndex, endIndex)

jQuery ->
  $('.that-field').on 'click', ->
    moveCursorToEnd(this)

<div class="field">
    <label for="pressure">Blood pressure</label>:
    <input class="that-field" type="text" name="pressure" id="pressure" value="24">
</div>
<p>
    Try clicking in the text field. The cursor will always jump to the end.
</p>

body {
    margin: 1em;
}

.field {
    margin-bottom: 1em;
}

ลองรหัสต่อไปนี้:

$('input').focus(function () {
    $(this).val($(this).val());
}).focus()

แม้ว่าฉันจะตอบช้าเกินไป แต่สำหรับคำถามในอนาคตมันจะมีประโยชน์ และมันก็ทำงานในcontenteditablediv

จากจุดที่คุณต้องตั้งโฟกัสเมื่อสิ้นสุด เขียนรหัสนี้ -

var el = document.getElementById("your_element_id");
placeCaretAtEnd(el);

และฟังก์ชั่นคือ -

function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}