无法单击文本框来更改其值

Question

I've got a text box I'm working on. When you hover over a text div, that div hides and the input tag shows (using display: none/block). The text div references the value of the input tag, and the only reason the input tag isn't standard is to make it look sleeker. The interaction between the two works fine, but I can't click on the text box once it's shown. If I right click on the text box, the cursor shows up as normal, then I can left click in the text box again to get rid of the right click menu and actually type in the box, editing the text div correctly. I can also tab between text boxes to edit (this is a recurring problem), but I still can't left click on them. If it makes any difference, I'm working within a vis.js timeline's swimlane-row-style row header.

Here's the input tag:

<input style='display: none;' id='editTitle' type='text' value='Title'/>

It's being created as part of a parent row header json object in the page's javascript file. I've tried setting position to sticky and z-index as high as (2^32)-1, as well as floating it (though not together). Nothing lets me left-click it to edit. This is such a strange problem to have. I have a feeling it has something to do with an incompatibility with vis.js, but I can't be sure. No errors are thrown and in the even that the user right-clicks then left clicks, the edit works correctly. Any ideas are appreciated.

Thanks.

Answer 1

I tried my best as how I understand your question and here when you point cursor on text the input appears and when mouse leave the input disappear to

 $(document).ready(function() { $('.content').on('mouseover', function() { $('#editTitle').show(200); }); $('.content').on('mouseleave', function() { $('#editTitle').hide(200); }); });

 * { box-sizing: border-box; padding: 0; margin: 0; } body { display: flex; height: 100vh; justify-content: center; align-items: center; }.container { display: flex; background: darkcyan; justify-content: center; align-items: center; flex-direction: column; width: 500px; height: 500px; } input { width: 200px; height: 30px; border: none; outline: none; border-radius: 10px; margin: 10px auto; }.content { margin: 10px auto; text-align: center; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <input style="display: none;" id='editTitle' type='text' value='Title' /> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div>