將當前焦點行集中在窗口中？

Question

我有在一個應用程序我工作的一個contentEditable股利。我希望光標當前所在的行在窗口中垂直居中。

當用戶向上或向下滾動光標應該始終保持居中，與contentEditable格或上下移動來調整。

我該如何去做這件事？

更新

我已經得到了一些存在的方式與此

演示：http://jsfiddle.net/n1dyezmg/

$(function() {  
    // fire our function on keyup 
    $(window).bind('keyup', function(event) {  
     if (!event.ctrlKey && !event.shiftKey) 
      getCaretXY(); 
    }); 
    // ... and also on page load 
    getCaretXY(); 
}); 

function getCaretXY(){  
    // this has got to be a performance drag, but... 
    // paste a special span at the cursor pos 
    pasteHtmlAtCaret("<span id='XY'></span>") 
    // get the XY offset of that element 
    var XYoffset = $("#XY").offset(); 
    // remove our special element 
    $("#XY").remove(); 
    // do something with the values 
    $("#caretXY").html(XYoffset.top + "," + XYoffset.left);  
} 

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 
      // only relatively recently standardized and is not supported in 
      // some 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); 
    } 
} 

我在插入符號功能漿糊here

的光標的x，y值記錄在keydown上，實際上並不如此我的預期表現爲豬，但不幸的是它有一些問題。

1. 這是不準確的。如果移動光標向下左下肢，用於獲取X的span，Y COORDS有時候會被推到了前行。

2. 如果我轉向突出顯示任何文本，然後按箭頭鍵的文字被刪除。這顯然是一位編輯的主要禁忌！我可以通過在頁面上隱藏相同尺寸的陰影div來解決這個問題。 getCaretXY然後可以將文本粘貼到這個div並使用它來確定高度。不準確的問題仍然存在。

我也沒有多少運氣使用該信息來調整編輯器的位置，雖然這只是與CSS足夠長的時間

Answer 1

我有一個頓悟早前在駕駛和聽凱特·布什的運行那座山上。有很多簡單的方法可以做我想做的事情。

創建一個div的內容。創建第二個，浮動div一行高。使用第二個div的scrollTop高度來設置第一個的高度。它的作品非常漂亮。

演示：http://jsfiddle.net/aheydvjk/1/

HTML

<div class="editorbox" id="editor" contenteditable="true"></div> 
<div class="editorbox" id="overlay" contenteditable="true"></div> 

CSS

html, body{ 
    overflow: hidden; 
} 

.editorbox { 
    overflow: hidden; 
    position: absolute; 
    left: 50%; 
    top: 200px; 
    margin-left: -200px; 
    margin-top: -20px; 
    width: 400px; 
    min-height: 20px; 
    line-height: 20px; 
    padding: 10px; 
    box-shadow: 0 0 0 1px #ddd; 
    height: 100%; 
    color: #777; 
} 

#overlay { 
    height: 20px; 
    background: #fff; 
    color: #222; 
    box-shadow: none; 
} 

的Javascript

$(function(){ 
    $("#overlay").on("scroll", function(){ 
     $("#editor").css("top", 200 -$("#overlay").scrollTop() + "px"); 
    }); 

    $("#overlay").on("keyup", function(){ 
     $("#editor").html($("#overlay").html()); 
    });  
}); 

我需要排序幾個小東西，比如點擊文本的某處或選擇多行，但這是一個開始工作的好地方。感謝所有的幫助！

Answer 2

擺弄沒有一個代碼示例看的情況下， ，我不能肯定地說，但也許text-align:center可能是您的解決方案？

Answer 3

我想出了做的伎倆的解決方案。

HTML

<div contenteditable></div> 

CSS

* { 
    margin: 0; 
    padding: 0; 
} 
div[contenteditable] { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -160px; 
    margin-top: -20px; 
    width: 300px; 
    min-height: 20px; 
    line-height: 20px; 
    padding: 10px; 
    box-shadow: 0 0 0 1px #ddd; 
} 

的JavaScript

var $div = $('div[contenteditable]'); 
var divPadding = parseInt($div.css('padding-top')); 
var divLineHeight = parseInt($div.css('line-height')); 

var centerDiv = function() { 
    var windowHeight = window.innerHeight; 
    var divHeight = $div.height(); 
    var divLines = divHeight/divLineHeight; 

    var divTop = (windowHeight/2) - ((divLines - 1) * divLineHeight) - divPadding; 

    $div.css('top', divTop); 
} 

setInterval(function() { 
    centerDiv(); 
}, 50); 

我們正在做的是重複呼叫centerDiv()，檢查可編輯<div>的高度，檢查它包含的行的數量，然後計算並更新top屬性垂直居中光標。

這裏有一個現場演示：http://jsfiddle.net/galengidman/u6d8krLm/