javascript - How to prevent deselection of selected text on blur (focus lost) in html

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=".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 mon 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.

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.

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./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 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.

Share edited May 23, 2017 at 12:24 CommunityBot 11 silver badge asked Nov 29, 2013 at 12:30 acostache 2,2757 gold badges25 silver badges52 bronze badges

1 you mean you want the value of the textbox even after focus lost – SarathSprakash Commented Nov 29, 2013 at 12:43
Yes, sorry if I skipped or misused some terms; tried to express this as close as possible to user scenario/perspective. – acostache Commented Nov 29, 2013 at 12:46

Add a ment |

2 Answers 2

Sorted by: Reset to default 5

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/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 ments)

Please see this updated fiddle: http://jsfiddle/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 ment 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.

You can save each selection in an interval, then retrieve it when you like. Here is an example that pulls the selection when the input has focus and clears the interval on blur:

function getSelection(elm) {
    var start = elm.selectionStart;
    var end = elm.selectionEnd;
    return elm.value.substring(start, end);
}

$('input').focus(function() {
    var self = this;
    $(this).data('interval', setInterval(function() {
        $(self).data('selection', getSelection(self));
    },20));
}).blur(function() {
    clearInterval($(this).data('interval'));
});

Now you can stuff like:

$('#text2').focus(function() {
    console.log('selection in #text1 was: '+$('#text1').data('selection'));
});

Demo: http://jsfiddle/qCCY5/

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to prevent deselection of selected text on blur (focus lost) in html - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)