將剪輯的內容可編輯div的視圖移動到光標位置

Question

我具有以下功能，允許用戶按下允許他們編輯div內容的按鈕。 通過單擊按鈕.rename ， div變得可編輯並且所有內容都被選擇，並且text-overflow:ellipsis替換為text-overflow:clip 。 當他們完成編輯時，用戶單擊enter且div不再可編輯，並且text-overflow:ellipsis返回。

一切正常，除非文本長於div的大小，即使我添加了將插入符移至開頭的其他代碼，現在仍不可編輯的div從末尾而不是從開頭顯示文本的文字。 關於如何將div的視圖移動到光標所在位置/文本開頭的任何想法？

這是代碼：

 //Makes tile contenteditable $('.rename').click( function() { var renameThis = $(this).parent().parent().parent().children(':first'), range, selection; $(renameThis).attr('contenteditable','true').selectText(); $(renameThis).css('text-overflow','clip'); }); //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) var renameThis = this, range, selection; 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 $(renameThis).attr('contenteditable','false'); $(renameThis).css('text-overflow','ellipsis'); // prevent the default behaviour of return key pressed return false; } }); 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 { width:100px; height:30px; background-color:#0C6; border-style:solid; border-width: 0px; border-color:#0C6; margin: 0px 0px 5px 0px; color:#FFF; padding-left:10px; line-height:30px; font-size:25px; cursor:pointer; /*border-radius: 5px;*/ box-shadow: 0 3px #00994d; float:left; font-family: 'Open Sans Condensed', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 

 <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"> <div class="rename">Click here to rename</div> </div> </div> </div> 

Answer 1

弄清楚了。 我要做的就是暫時將div的CSS更改為overflow:scroll ，將滾動位置設置為0，然后再更改為overflow:hidden ，然后再完成更改。