在 pdf.js 中拖动空白时防止文本选择“跳”到顶部

Question

我正在使用 pdf.js 进行文本选择。

因此 pdf.js 创建了一堆绝对定位的 div，其中包含 pdf 中的各种文本以提供文本选择。

拖动选择文本时，如果您继续选择非文本区域（例如段落之间的区域），则选择会跳转到选择文本顶部的所有内容。

如果您查看他们的示例，您可以看到我所描述的内容。尝试在左栏中选择多个段落的文本，您会看到选择“闪烁”以选择顶部的所有内容。 http://mozilla.github.io/pdf.js/web/viewer.html

关于如何防止这种情况发生有什么想法吗？这非常分散注意力。

我认为这与所有保持文本绝对的 div 有关。

Answer 1

已修复： 只需添加高度：200px 即可

.textLayer > div {height:200px;}

在viewer.css中

Answer 2

这有点旧，但对某些人来说仍然可能有用。将

textLayerMode

设置为 2 应该可以解决该问题。

示例：

new PDFViewer({ ...otherProps, textLayerMode: 2 })

Answer 3

在

pdf.js

文件中，搜索

function appendText

并添加

textDiv.className = "hitext";

下

var textDiv = document.createElement('div');

现在将其添加到您的自定义 js 文件中：

window.addEventListener('mousedown', function mouseup(evt) {

if($(".hitext:hover").length==0) //To check if the cursor is hovering over the text
{
  //Selection is disabled using CSS if the mousedown event was triggered when the cursor was not over the text
  $(".hitext").css({"-webkit-touch-callout": "none", "-webkit-user-select": "none", "-khtml-user-select": "none", "-moz-user-select": "none", "-ms-user-select": "none", "user-select": "none"}); 
}
else 
{
  $(".hitext").css({"-webkit-touch-callout": "text", "-webkit-user-select": "text", "-khtml-user-select": "text", "-moz-user-select": "text", "-ms-user-select": "text", "user-select": "text"}); 
}

}); 

Answer 4

在 web iewer.css 文件中添加 height:200px; :

.textLayer > div {height:200px;}