我的问题有两部分，但它们是相关的。

首先 - 我有一些文本的 Contenteditable DIV，我需要获得这个 DIV 的总行数。可能吗？

其次 - 我需要获取插入符行的位置，如果它位于第 1、2、3 等行......

有人可以帮忙吗？

最佳答案

直接的答案是，没有任何方法可以真正让您获得这些数字。但是，有许多不同的解决方法可以应用于估计(我使用估计，因为我认为它们不能 100% 准确)那些值(value)观。

要回答您的第一个问题，如何获取元素中的行数。假设元素使用一致的 line-height ，除以元素height即可求出行数与 line-height .如果你有 margin 的元素，这当然会变得更加复杂。小号，padding s，或微分line-height s 在元素内。如果这还不够问题，line-height property 不一定是数值，即它可以是 normal或 % 等。关于 line-height 有很多问题属性以及如何在 SO 上获得它的数字表示，所以我不会详细介绍它。为了剩下的答案，我确实专门分配了一个公共(public)的 line-height跨越元素。

问题中问题更大的部分是在元素中找到插入符号的位置。同样，没有一种方法可以返回正确答案。相反，您可以采用一种估计插入符号行位置的方法是制作 range在当前插入符位置( selection )，在那里插入一个虚拟节点，获取节点 offset相对于容器offset , 根据 top offset 计算行数它，然后删除虚拟元素。

当您不能使用虚拟元素时会出现其他问题 hide()它或将其留空。

这似乎是一种非常糟糕的做法，事实确实如此。尝试使用箭头导航时，它肯定无法完美运行。那么为什么不直接使用 getClientRects()对于 selection ？当它只是没有任何空格的文本时它工作正常，但当你抛出一些 <br /><br /> 时它会立即工作。在那里，它不会再返回你那里的行位置。此外，当您位于一行的第一个或最后一个字符时，它有时会给出不正确的行，因为它会根据可用空间量向上或向下抛出元素。

如果您正在寻找一种简单易行的方法来查找插入符号的位置和行数，没有。如果粗略估计足够，那么我的解决方案是一个好的开始(它当然可以使用更多的工作，并且支持 IE 在这种情况下应该容易得多，因为 TextRange 对象实际上以像素为单位提供偏移量)。

我对此的看法:

var lineHeight = parseInt($('#editable').css('line-height'));
//var ce = $('#editable')[0].getClientRects();
var ce = $('#editable').position();
console.log("Lines: "+$('#editable').height()/lineHeight);
$('#editable').bind('click keyup keydown',function(){
   if(window.getSelection){
        range = window.getSelection().getRangeAt(0);
      range.insertNode($('<canvas />').attr('id','tempCaretFinder')[0]);
       var p = $('canvas#tempCaretFinder').position();
       $('canvas#tempCaretFinder').remove();
       console.log("Caret line: "+(Math.ceil((p.top-ce.top)/lineHeight)+1));

    }else if(document.selection) { 
        // the IE way, which should be relatively easier. as TextRange objects return offsets directly.
        range = document.selection.createRange();  
    }

});

示例:http://jsfiddle.net/niklasvh/mKQUH/

编辑:尝试 2 http://jsfiddle.net/niklasvh/mKQUH/129/

如前所述，创建虚拟元素有时会使插入符跳到各处，因此我再次尝试使用 getClientRects() 来获取范围。为了使它们更可行，我让选择本身扩展一个字符，然后创建范围，然后检查 Rect 位置，然后将插入符号向后移动一个字符。

为什么？

因为一行的第一个字符上的插入符，其顶部参数将与上一行处于同一级别，因此通过对其应用额外的字符，它可以检查它是否实际上是一个新行。 getClientRects() 的另一个问题是它对空换行不起作用。为了解决这个问题，我使用之前创建的虚拟元素作为这些情况下的后备。

最终结果:

var lineHeight = parseInt($('#editable').css('line-height'));
//var ce = $('#editable')[0].getClientRects();
var ce = $('#editable').offset();
console.log("Lines: "+$('#editable').height()/lineHeight);
$('#editable').bind('click keyup keydown',function(e){
    //alert($(window).scrollTop());
   if(window.getSelection){
       var save = window.getSelection();
       var s = window.getSelection();
       s.modify('extend','forward','character');
     // s.modify('extend','forward','line');
       range = s.getRangeAt(0);
       var p = range.getClientRects();
       var top;
       //console.log(p);
       if (typeof p[1] != "undefined"){
           top = p[1].top+$(window).scrollTop();
               }else if (typeof p[0] != "undefined"){
                top = p[0].top+$(window).scrollTop();    
               }
       else{
          // sigh... let's make a real work around then
           range.insertNode($('<canvas />').attr('id','tempCaretFinder')[0]);
       var p = $('canvas#tempCaretFinder').offset();
       $('canvas#tempCaretFinder').remove();
           top = p.top;

       }

     // console.log(top-ce.top);
       console.log("Caret line: "+(Math.ceil((top-ce.top)/lineHeight)));
       save.modify('move','backward','character');
       /*
       range = s.getRangeAt(0);
      range.insertNode($('<canvas />').attr('id','tempCaretFinder')[0]);
       var p = $('canvas#tempCaretFinder').position();
       $('canvas#tempCaretFinder').remove();
       console.log("Caret line: "+(Math.ceil((p.top-ce.top)/lineHeight)+1));
       console.log(e.which);

       switch(e.which){
           case 40:
             s.modify("move", "forward","line");

             break;  
                    case 38:
             s.modify("move", "backward","lineboundary");

             break;  
       }
       */


    }else if(document.selection) {
        // the IE way, which should be relatively easier. as TextRange objects return offsets directly.
        range = document.selection.createRange();  
    }

});

关于html - 如何获取 ContentEditable 区域的行数和当前插入符行的位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5528004/