Question

<div class="content" contenteditable="true">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

这是javascript代码

var divheight = $(".content").height(); 
var lineheight = $(".content").css('line-height').replace("px","");
alert(Math.round(divheight/parseInt(lineheight)));

css是

.content {
    line-height:20px;
}

例如，如果点击.content <span class="cursor"></span>

.cursor {
    border-left: 1px solid black;
    margin-left: -1px;
    color: #2E3D48;
}

如何找到.cursor的行号是.content

刚尝试了模型小提琴

https://jsfiddle.net/1ok3dah9/

Answer 1

非常有价值示例（假设.cursor是目标，我们可以推断出它的行高以找到偏移量）：

;(function($){
  // $(...).lineNumber( [cursorClassName = 'cursor'] );
  // Locates the pseudo-line number of the .cursor within the target element.
  // This is based on two thigns:
  //  1. The target element has a line-height, and
  //  2. The target element has a .cursor element we can position
  // Basic math is performed based on line-height and the .cursor's current
  // vertical offset.
  $.fn.lineNumber = function(cursorClassName) {
    // in case we wanted to target a new class name
    cursorClassName = 'cursor';
    
    // locate the cursor within the current element
  	var $cursor = this.find('.'+cursorClassName);
    if ($cursor.length) { // check for .cursor
      var lineHeight = parseInt($cursor.css('line-height').match(/\d+/)[0]),
          topPosition = $cursor.position().top;
      // divide top offset by line height. Apply integer division and return
      // the approx. line number. In this case, lines are zero-based, so offset
      // by 1.
      return ~~(topPosition / lineHeight) + 1;
    }
    return -1; // no match
  };
})(jQuery);

$('.lineNumber').text($('.content').lineNumber());
// Go full-screen to see it work based on window size (e.g. word-wrapping)
$(window).on('resize', function(){
  $('.lineNumber').text($('.content').lineNumber());
});

.content {
    line-height:20px;
}
.cursor {
    border-left: 1px solid black;
    margin-left: -1px;
    color: #2E3D48;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="content" contenteditable="true">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived<span class="cursor"></span> not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

<pre>Line #: <span class="lineNumber" style="color:#f00;"></span></pre>

如果你想玩游戏，这里有一个小提琴：https://jsfiddle.net/np8owsbv/2/

我也将小提琴绑定到窗口调整大小并且似乎正确调整。也可以玩.cursor位置，看看它是如何展开的。

如何获取段落中光标的行号

1 个答案: