将当前焦点行集中在窗口中？

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/