我将所选文本从 pdf 动态插入到文本框。我还创建了动态文本框，其中第一个选定的文本被添加到带有 pdf 页码的第一个文本框，对于下一个选择，不会触发鼠标事件。 我需要将第二个选定的文本添加到新添加的动态文本框，将第三个选定的文本添加到第三个文本框，依此类推。
我尝试了下面的代码，pdf将被上传并在左侧页面上查看（不包括代码）。
html代码
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="google" content="notranslate">
<title>PDF.js viewer</title>
<script src="../build/pdf.js"></script>
<style>
#copyText, #copyText1 {
font-size: 18pt;
height: 42px;
width: 150px;
}
#pageNo, #pageNo1 {
font-size: 18pt;
height: 42px;
width: 40px;
}
#table {
height: 100%;
width: 80%;
}
#highlight-btn, #highlight-btn1 {
padding: 15px 25px;
font-size: 12px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #04AA6D;
border: none;
border-radius: 15px;
box-shadow: 0 5px #999;
}
.highlightss {
background-color: yellow;
}
</style>
</head>
<body tabindex="1">
<table id="table">
@*<tbody id="TextBoxContainer"></tbody>*@
<tr>
<td>
<label for="pageNo">PageNo:</label>
<input type="text" id="pageNo" size="10" />
</td>
<td>
<button type="button" id="highlight-btn" size="10">Highlight</button>
</td>
<td>
<button type="button" id="highlight-btn1" size="10">Highlight</button>
</td>
<td>
<button id="btnAdd" type="button" class="btn btn-primary" data-toggle="tooltip" data-original-title="Add more controls"><i class="glyphicon glyphicon-plus-sign"></i> Add </button>
</td>
<td id="TextBoxContainer"></td>
</tr>
</table>
</body>
</html>
.js
<script>
var pageNumber = null; const text = ''; const selection = '';
var highlightBtn = document.getElementById('highlight-btn1');
const myTextarea = document.getElementById('copyText');
const myDynTextarea = document.getElementById('DTextBox');
const pageNo = document.getElementById('pageNo');
document.addEventListener('mouseup', () => {
document.getElementById('copyText').value = '';
const selectedText = window.getSelection().toString();
if ((selectedText !== '') && (myTextarea.value == '') && (pageNo.value =='')) {
myTextarea.value += selectedText;
pageNumber = PDFViewerApplication.pdfViewer.currentPageNumber;
document.getElementById('pageNo').value = pageNumber;
$('copyText').attr('disabled', true);
}
else {
myDynTextarea.value += selectedText;
pageNumber = PDFViewerApplication.pdfViewer.currentPageNumber;
document.getElementById('pageNo').value = pageNumber;
}
});
highlightBtn.addEventListener('click', () => {
window.getSelection().getRangeAt(0).surroundContents(myTextarea);
myTextarea.classList.add("highlightss");
});
//add button
$(function () {
$("#btnAdd").bind("click", function () {
var div = $("<tr />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("body").on("click", ".remove", function () {
$(this).closest("tr").remove();
});
});
function GetDynamicTextBox(value) {
return '<td><input id="DTextBox" name = "DynamicTextBox" type="text" style="width:100px;height:42px;" /></td>' + '<td><input type="text" id="pageNo" size="10" /></td>' + '<td><input type="button" id="highlight-btn" size="10" value = "' + 'Highlight' + '" /></td>' + '<td><input type="button" id="highlight-btn1" size="10" value = "' + 'Highlight' + '" /></td>' + '<td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign"></i></button></td>'
}
</script>
谢谢