更新

Question

我在我正在处理的应用中获得了contentEditable div。我希望光标当前所在的行在窗口中垂直居中。

当用户向上或向下滚动时，光标应始终保持居中，contentEditable div向上或向下移动以进行调整。

我该怎么做呢？

更新

我已经通过这个

获得了一些方法

$(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上，它实际上并不像我预期的那么多，但不幸的是它有一些问题。

这是不准确的。如果将光标向左移动，则用于获取X，Y坐标的span有时会被推到前一行。
如果我突出显示任何文本，并按箭头键删除文本。这显然是编辑的主要禁忌！我可以通过在页面上某处隐藏相同尺寸的阴影div来解决这个问题。然后getCaretXY可以将文本粘贴到此div中并使用它来确定高度。不准确的问题仍然存在。

使用此信息来调整编辑器的位置我也没有多少运气，尽管这只是一个长时间摆弄CSS的案例

Answer 1

我提出了一个可以解决问题的解决方案。

<强> 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>的高度，检查它包含的行数，然后计算并更新{{1}用于垂直居中光标的属性。

这是一个现场演示：http://jsfiddle.net/galengidman/u6d8krLm/

Answer 2

我早些时候在开车和听凯特·布什的跑上那座小山的时候顿悟了一下。做我想做的事情要容易得多。

使用内容创建div。创建第二个浮动div一行高。使用第二个scrollTop中的div高度来设置第一个<div class="editorbox" id="editor" contenteditable="true"></div> <div class="editorbox" id="overlay" contenteditable="true"></div>的高度。它工作得很漂亮。

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

HTML

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;
}

CSS

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

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

的Javascript

{{1}}

我需要对一些小东西进行排序，例如点击文本上的某个位置或选择多行，但这是一个开始工作的好地方。感谢您的帮助！

Answer 3

如果没有代码示例，我无法肯定地说，但是text-align:center可能是您的解决方案吗？

将当前聚焦的线条居中放在窗口中？

更新

3 个答案: