將修剪後的contenteditable div的視圖移動到光標位置

Question

我有以下功能，允許用戶按下一個按鈕，允許他們編輯div的內容。通過點擊按鈕.renamediv變得可編輯，內容全部被選中，text-overflow:ellipsis被替換爲text-overflow:clip。當他們完成編輯時，用戶點擊輸入並且div不再可編輯，並且text-overflow:ellipsis返回。

一切工作，但如果文本比div的尺寸長，現在不是編輯div顯示了文末，而不是從一開始，即使我增加額外的代碼，移動插入到文本的開頭。關於如何將div的視圖移動到光標位置/文本開頭的任何想法？

下面的代碼：

//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

想通了。我所要做的只是暫時將div的CSS更改爲overflow:scroll，將滾動位置設置爲0，然後在返回前更改回overflow:hidden，然後再完成。