获取 contenteditable div 的当前行？

Question

我查了一下并发现没有方法可以找到 a 中的当前行div contenteditable，所以我尝试编写一个脚本来最好地估计当前行。

var curLine = 1;
var curColumn = 1;

$(".editable").onkeydown = function(e) {
    var keyCode = e.keyCode || e.which;

    switch( keyCode ) {
        case 13:
            console.log("Enter; on line: " + curLine);
            curLine++;
            break;

        case 8:
            if( /* current line has a text length of 0 */ ) {
                console.log("Previous line prepended; previous enter reversed; on line: " + curLine);
                do {
                    curLine--;
                } while( curLine > 0 );
            }
            // } else if( /* single digit removed */ ) {
                // console.log("Bit prepended");
            // }
            break;
    }
};          

所以，正如你所看到的，我有几个问题。这一点：if( /* current line has a text length of 0 */ )我似乎无法定位当前行并查看其字符串长度是否为 0。另外，我的do...while语句不起作用，就好像我一遍又一遍地在第一行上按退格键一样，它继续变成负数（当它应该保持在 1 [ > 0] 时）。任何帮助将不胜感激。

Answer 1

这在 Chrome 中对我有用。现在将在其他浏览器中测试：

$(".editable").on("keyup", function(keyCode){
    var linesCount = $(".editable div").length + 1;
    $("#linesCount").html(linesCount + " lines.");
    return linesCount;
});

对于每一行，内容可编辑 div 都会创建一个新的 div 子级。如果你计算这些 div，你就得到了总行数。

http://jsfiddle.net/hescano/PypeD/

编辑：对于 FF 这实际上会产生<br>标签。你可以数一下这些。

FF： http: //jsfiddle.net/PypeD/1/