Question

我突出显示了代码，div块中的每一行。当我选择文本时，我需要更改包含所选文本的所有div元素的背景颜色。
现在它看起来像这样（通常的文字选择）：我需要选择行（div块）而不是文本，所以结果应该是这样的：

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Code</title>
      <link href='http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shCore.css' rel='stylesheet' type='text/css'>
  	  <link href='http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css' rel='stylesheet' type='text/css'>
      <script src='http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shCore.js' type='text/javascript'></script>
      <script src='http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushJava.js' type='text/javascript'></script>   
      <style>
			.syntaxhighlighter .code .container .line:hover {
				background-color: chartreuse !important; 
			}
      </style>   
</head>

<body>
	<div class="container">
    <div class="code-snippet">
        <pre class="brush: java">
			package file;

			import com.epam.codereview.manager.servlet.Controller;
			import com.epam.codereview.manager.servlet.RequestMapping;
			import com.epam.codereview.manager.servlet.View;
			import com.epam.codereview.util.FileUtil;
			import org.apache.log4j.Logger;

			import javax.servlet.ServletException;
			import java.io.IOException;

			/** ffdfdf
			 * fdfdfd
			 */

			@Controller
			public class MainController {
				private static Logger logger = Logger.getLogger(MainController.class);

				@RequestMapping(value = "/")
				public void index(View view) throws ServletException, IOException {

				}

			}
		</pre>
    </div>
</div>

<script type="text/javascript">
    SyntaxHighlighter.defaults['toolbar'] = false;
    SyntaxHighlighter.highlight(); 
</script>

</body>

</html>

＆＃13;

＆＃13;
它应该看起来像悬停，但选择文本。

Answer 1

代码不是很整洁，但它确实有用。

编辑：添加css代码以禁用选择颜色。

/* Mozilla based browsers */
::-moz-selection {
   background-color: transparent;
}

::selection {
   background-color: transparent;
}

＆＃13;

var selecting = false, startIndex = null, endIndex = null;

var paint = function(e){
  //e.stopPropagation();
  if(!selecting) return;

  var selection = (document.selection) ? document.selection.createRange().text : document.getSelection();

  if(selection.baseOffset != selection.extentOffset){
      newStartIndex = parseInt(selection.baseNode.parentNode.getAttribute("index"));
      newEndIndex = parseInt(selection.extentNode.parentNode.getAttribute("index"));
      
      if(startIndex != newStartIndex || endIndex != newEndIndex){
          if(startIndex === null) startIndex = newStartIndex;
          if(endIndex === null) endIndex = newEndIndex;
        
          var s = Math.min(startIndex, newStartIndex, newStartIndex, endIndex, newEndIndex);
          var l = Math.max(startIndex, newStartIndex, endIndex, newEndIndex);
          for(var i=s; i<=l; i++){
            var bg = i>Math.max(newEndIndex,newStartIndex) || i<Math.min(newStartIndex,newEndIndex) ? "inherit" : "#ddd";
            $('#div' + i).css("background-color", bg);
          }
        
          startIndex = Math.min(newStartIndex, newEndIndex);
          endIndex = Math.max(newStartIndex, newEndIndex);
      }
  }
};
$('.mydiv').bind('mousemove', paint);
$('.mydiv').bind('mouseover', paint);
$('.mydiv').bind('mousedown', function(){
    console.log('down');
    selecting = true;
});
$('.mydiv').bind('mouseup', function(){
    selecting = false;
    startIndex = null;
    endIndex = null;
});
$(document).mousedown(function(){
    $('.mydiv').css('background-color', 'inherit');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" index="1" class="mydiv">lorem ipsum dolor sit amet 1</div>
<div id="div2" index="2" class="mydiv">lorem ipsum dolor sit amet 2</div>
<div id="div3" index="3" class="mydiv">lorem ipsum dolor sit amet 3</div>
<div id="div4" index="4" class="mydiv">lorem ipsum dolor sit amet 4</div>
<div id="div5" index="5" class="mydiv">lorem ipsum dolor sit amet 5</div>
<div id="div6" index="6" class="mydiv">lorem ipsum dolor sit amet 6</div>

＆＃13;

Answer 2

window.getSelection().anchorNode返回用户选择开始的DOM节点，其.focusNode返回选择结束的节点;突出显示从A到B的所有内容（请记住focusNode可能在anchorNode之前......）

或者你可以很懒，只需在每一行测试Selection.containsNode（），就像我在这里做的那样：

＆＃13;

$(window).on('mousedown mouseup mousemove', function() {
  var sel = window.getSelection();
  if (sel.isCollapsed) {
    // nothing is selected, remove any existing highlights
    $('.line').removeClass('highlight');
  } else {
    $('.line').each(function() {
      $(this).toggleClass('highlight', sel.containsNode(this, true));
      // the second param of containsNode causes partially-selected nodes to be included
    });
  }
});

＆＃13;

.highlight {
  background-color: #2C86FF;
  color: #FFF;
}
::selection {
  background-color: transparent;
}
::-moz-selection {
  background-color: transparent
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="line">lorem ipsum dolor sit amet 1</div>
<div class="line">lorem ipsum dolor sit amet 2</div>
<div class="line">lorem ipsum dolor sit amet 3</div>
<div class="line">lorem ipsum dolor sit amet 4</div>
<div class="line">lorem ipsum dolor sit amet 5</div>
<div class="line">lorem ipsum dolor sit amet 6</div>

＆＃13;

请参阅https://developer.mozilla.org/en-US/docs/Web/API/Selection

（版本9之前的Internet Explorer当然不支持此功能;它的文档选择要少得多）。我个人认为这是一个使用短语＆＃34;优雅降级的好机会＆＃34; ：）

选择div而不是文本

2 个答案: