I have a situation where I have two sibling divs. On the left side, I am loading a PDF document, while on the right side, I have input fields controlled by jQuery.
My challenge arises when I try to select and delete the value from the input using the mouse and backspace key. When I select the value from the input field, the mouse hovers over the PDF document. Subsequently, when I press the backspace key to delete the selected value, although the value is deleted and the document.activeElement shows the input field, there is no visible cursor blinking. As a result, if I start typing again, the text displays in reverse order.
It seems to be a limitation with the browser, but I am wondering if there is a workaround for this issue.
I have attempted several options listed below, but none have been successful:
- Getting the input element and using
inputele.focus()and.select()when the backspace is clicked. - Wrapping
inputele.focus()in a setTimeout function. - Using
setSelectionRange. - Implementing event bubbling and capturing when the mouse enters the PDF and when the backspace key is pressed (e.stopPropagation, e.preventDefault, etc).
I have spent a significant amount of time searching for a workaround online but without success. If anyone has a solution, please do share as it would be greatly appreciated.
Below is an example code snippet:
<div class="container" style="
display: flex;
align-items: center;
">
<div>
<iframe src="https://www.ifpi.org/content/library/DMR2010.pdf">
</iframe>
</div>
<div>
<input id="inputId" type="text">
</div>
</div>