Ansicht des abgeschnittenen contenteditable div an die Cursorposition verschieben

Question

Ich habe die folgenden Funktionen, um einem Benutzer zu ermöglichen, eine Schaltfläche zu drücken, die es ihnen ermöglicht, den Inhalt eines div zu bearbeiten. Durch Klicken auf eine Schaltfläche .rename wird die div editierbar und der Inhalt wird alle ausgewählt, und die text-overflow:ellipsis wird durch text-overflow:clip ersetzt. Wenn sie die Bearbeitung beendet haben, klickt der Benutzer auf Enter und die div ist nicht mehr editierbar, und die text-overflow:ellipsis kehrt zurück.

Alles funktioniert, außer, dass, wenn der Text länger als die Größe der div ist, das jetzt nicht editierbar div den Text aus dem Ende zeigt, statt von Anfang an, auch wenn ich zusätzlichen Code hinzugefügt, die bewegt Caret an den Anfang des Textes. Irgendwelche Gedanken darüber, wie ich die Ansicht des div an den Ort des Cursors/den Anfang des Textes verschieben kann?

Hier ist der Code:

//Makes tile contenteditable 
 
$('.rename').click(
 
\t function() { 
 
\t \t var renameThis = $(this).parent().parent().parent().children(':first'), range, selection; 
 
\t \t $(renameThis).attr('contenteditable','true').selectText(); 
 
\t \t $(renameThis).css('text-overflow','clip'); 
 
\t \t 
 
\t }); 
 

 
\t //Makes the enter key close the tile editing 
 
$('div.tile').keydown(function(e) { 
 
    // trap the return key being pressed 
 
    if (e.keyCode === 13) { 
 
     // insert 2 br tags (if only one br tag is inserted the cursor won't go to the next line) 
 
\t \t var renameThis = this, range, selection; 
 
\t \t range = document.createRange();//Create a range (a range is a like the selection but invisible) 
 
     range.selectNodeContents(renameThis);//Select the entire contents of the element with the range 
 
     range.collapse(true);//collapse the range to the end point. false means collapse to end rather than the start 
 
     selection = window.getSelection();//get the selection object (allows you to change selection) 
 
     selection.removeAllRanges();//remove any selections already made 
 
     selection.addRange(range);//make the range you have just created the visible selection 
 
     \t $(renameThis).attr('contenteditable','false'); 
 
\t \t $(renameThis).css('text-overflow','ellipsis'); 
 
     \t // prevent the default behaviour of return key pressed 
 
     \t return false; 
 
    \t } 
 
    }); 
 

 
jQuery.fn.selectText = function(){ 
 
    this.find('input').each(function() { 
 
     if($(this).prev().length == 0 || !$(this).prev().hasClass('p_copy')) { 
 
      $('<p class="p_copy" style="position: absolute; z-index: -1;"></p>').insertBefore($(this)); 
 
     } 
 
     $(this).prev().html($(this).val()); 
 
    }); 
 
    var doc = document; 
 
    var element = this[0]; 
 
    console.log(this, element); 
 
    if (doc.body.createTextRange) { 
 
     var range = document.body.createTextRange(); 
 
     range.moveToElementText(element); 
 
     range.select(); 
 
    } else if (window.getSelection) { 
 
     var selection = window.getSelection();   
 
     var range = document.createRange(); 
 
     range.selectNodeContents(element); 
 
     selection.removeAllRanges(); 
 
     selection.addRange(range); 
 
    } 
 
};

div.tile { 
 
\t width:100px; 
 
\t height:30px; 
 
\t background-color:#0C6; 
 
\t border-style:solid; 
 
\t border-width: 0px; 
 
\t border-color:#0C6; 
 
\t margin: 0px 0px 5px 0px; 
 
\t color:#FFF; 
 
\t padding-left:10px; 
 
\t line-height:30px; 
 
\t font-size:25px; 
 
\t cursor:pointer; 
 
\t /*border-radius: 5px;*/ 
 
\t box-shadow: 0 3px #00994d; 
 
\t float:left; 
 
\t font-family: 'Open Sans Condensed', sans-serif; 
 
\t white-space: nowrap; 
 
    \t overflow: hidden; 
 
\t text-overflow: ellipsis; 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
<div class="tile webtile">Netflix</div> 
 
    <div class="dropdown-this-content-container"> 
 
    <div class="dropdown-this-content"> \t 
 
     <div class="rename">Click here to rename</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

figured it out. Alles, was ich zu tun hatte, war, das CSS des div vorübergehend auf overflow:scroll zu ändern, die Scroll-Position auf 0 zu setzen und dann zurück zu overflow:hidden zu wechseln, bevor ich vor dem Beenden zurückwechsle.