I am currently working on a chat box project and I want the input field within the message area to automatically get focused when the user clicks anywhere in the chat box. However, I don't want this functionality to interfere with text selection for copying. If a user is selecting text to copy, I want them to be able to do so without the selected text being deselected upon releasing the mouse.
Does anyone have any ideas on how to achieve this?
Note: The chat boxes are dynamically generated using jQuery, so I need to implement event handling accordingly.
Here is a snippet of the relevant code:
$("body").on("click", ".chat", function() {
$(this).find("input").focus()
});
.chat {
background-color: #fff;
bottom: 0;
left: 0;
position: fixed;
width: 200px;
height: 250px;
border: 1px solid #ccc;
padding: 0.5em
}
.chat .messages {
color: #666;
}
.chat input {
position: absolute;
bottom: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="chat">
<div class="messages">Terrible markup... Try to copy me. Lorem ipsum dolor sit amet, consectetur adipiscing 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>
<input/>
</div>