I insert selected text dynamically from a pdf to a textbox. I also create dynamic textboxes, in which 1st selected text is added to the 1st textbox with the page number of the pdf, for the next selection the mouse-up event is not fired.
I need to add the 2nd selected text to the newly added dynamic textbox and 3rd selected text to the 3rd textbox and so on.
I tried the below code, The pdf will be uploaded and viewed on the page on the left side(code not included).
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>'
}#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;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>