javascript - 获取 contenteditable div 的当前行？

Question

我四处寻找并了解到没有方法可以在 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(/* 当前行的文本长度为 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/