Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
153
rated 0 times [  158] [ 5]  / answers: 1 / hits: 10586  / 11 Years ago, fri, november 29, 2013, 12:00:00

I have been doing research on this simple sounding issue for a couple of days and I have not seen any result.



In a nutshell my problem is as follows: I would like to select text in a some input field, move focus to another field (or generally speaking some other element), but not lose my selected text.



Such a situation could correspond to a use-case in which I select text in a field, right-click and display a custom popup menu, but do not wish to lose focus of selected text, because I want to do some operations on the previously selected text.



A small code test sample would be (for my initial simple scenario - here I am forcing text selection when the second input field gains focus):



<html>
<head>
<script src=http://code.jquery.com/jquery-latest.js></script>
</head>
<body>
<input type=text id=text1 size=20 value=Test1/>
<input type=text id=text2 size=20 value=Test2/>

<script>
$('#text2').focus( function (evt) {
var target = $('#text1')[0];
target.select();
console.log('active/focused element: ' + document.activeElement.id);
});
</script>
</body>
</html>


I have been searching SO and web for a solution to this and have not seen much if any help.
I am not sure this is even really possible (due to the link between blur and selection lost and focus and selection). I have seen a style property called preventDeselect, in another SO answer - this does not work and I have not even such documentation or browser support for this.



I am quite struggling with this and would appreciate some help: even saying I can't do this at all or maybe some ways to go.



UPDATE:
Just for the record, my user scenario, which refers to text selection and context menu, is a common one (it slipped my mind to mention): just select some text in this page (or in an input type field) and right click to get the browser's default context menu - my scenario is different in that i want to use a custom menu, but with similar behavior to the browser's context menu - which normally allows to select some text, cut/copy the selection, navigate within the context menu without losing the selected text. So I think it should be possible somehow :) to do all these things with a context menu and still have your selection.


More From » jquery

 Answers
11

Attempting to answer this part of your question:




Such a situation could correspond to a use-case in which I select text
in a field, right-click and display a custom popup menu, but do not
wish to lose focus of selected text, because I want to do some
operations on the previously selected text.




For this use-case, I created a quick fiddle: http://jsfiddle.net/4XE9a/1/



Note: Am using the same getSelection function from @David's answer.



If you select any text and then right-click on the input, a custom popup menu appears. Click option 1. You will find that the selection is not lost even though the focus has shifted to that anchor tag.



However, for the second part of your question regarding focus shifting to another textbox, @David's answer suffices.



Update: (after your comments)



Please see this updated fiddle: http://jsfiddle.net/783mA/1/



Now, when you select some text and right-click on the input it will show the custom popup menu with three options. Use tab to navigate and press space or click on the highlighted option. (Due to paucity of time I could not implement up/down arrow keys, but the concept remains the same)



This demonstrates your question in the comment that the selection is still not lost while navigating the menu.



Note: You are wanting to visually keep the selection highlight and not lose the selection while clicking anywhere else. Please note that this is not possible because text selection behavior is OS implemented. Browser, html etc do not play a role here. The text selection is lost as soon as you click anywhere outside the context of selection. This is because the system starts expecting a new selection as soon as you click anywhere outside. However, controls without text surface are exempt. Button, scrollbar arrows etc will not cause selection to lose.



To view this behaviour, in the fiddle, select some text and then click any dropdown on the left pane. The text selection is not lost, even visually for that matter.



This is why in the new fiddle above, I purposely used buttons to demonstrate.


[#49985] Thursday, September 22, 2022, 2 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
sonja

Total Points: 541
Total Questions: 113
Total Answers: 114

Location: Anguilla
Member since Sun, Jan 29, 2023
1 Year ago
sonja questions
Mon, Nov 30, 20, 00:00, 4 Years ago
Sun, Oct 11, 20, 00:00, 4 Years ago
Thu, May 21, 20, 00:00, 4 Years ago
Sun, Nov 10, 19, 00:00, 5 Years ago
Mon, Aug 26, 19, 00:00, 5 Years ago
;