Chrome extension - select text in arbitrary box - javascript

I want to create a Chrome extension that lets me drag out a box and ONLY select the text in that box. Chrome by default will select all text from the start to the end of my dragged box, including text outside the box.
Is there any way to do that? I'm googling and I'm not sure it's technically possible?

Related

Is it possible to keep the focus of selected/highlighted text as it is?

I am creating a simple wysiwyg editor by using a react-contenteditable.
Is it possible that if user has selected/highlighted some text inside the editor its focus must not get lost if clicked outside on any other input element?

Is there any way to make Ionic 4 text selectable?

I want users to be able to select text content so that they can copy it and paste it elsewhere, but it seems that text selection has been disabled. Users can select text that is in an input or a textarea, but I want them to be able to select even regular content text. Is there a way to enable text selection?
I tried this solution: ionic 2: How to make text selectable?. It doesn't work.
Is it possible to make Ionic 4 text selectable and how?
You can try the solution in this post https://github.com/ionic-team/ionic/issues/17753
I also know there is a clipboard management plugin but I never used it:
https://ionicframework.com/docs/enterprise/clipboard

Unhighlighted text is still copied to the clipboard in Chrome

There were some discussion in the past about disabling highlighting some parts of the selected text in Web pages, so the user is not able to visually select them (e. g. How to disable text selection highlighting using CSS?).
But they are still selected when the user selects it (e. g. with the adjacent text without the anti-highlighting protection).
So he or she press Ctrl+C to be surprised - the text in the clipboard is different from the selected one.
Is there some way to exclude a non-highlighted text from the selecting it, too?
Edited:
This problem manifests itself only in Chrome browser, other browsers don't select non-highlighted text (thanks to evolutionxbox) so my question is now:
How reach my goal for Chrome, too?

In firefox, when right-click on a textfield, how to get the start position?

My requirement is I need to know what value is selected in a text field when right-click on the specific value portion.
e.g. Suppose current value in the text field is "a#a.com, b#b.com, c#c.com", when I move the mouse over "b#b.com" and right click, program should know I have chosen that email address.
I already implemented it for left-click (by checking event.selectionStart), but in Firefox, right-click will not move the edit cursor to the clicked position, so wherever I right click at, the event.selectionStart keeps the same value.
Any idea?
Thanks...
OK. In firefox, event.rangeOffset can be used.

Hiding the text input cursor (the caret) showing through overlayed elements Internet Explorer

I have a form with a special widget that fills in a text input. When the text input has focus, the widget appears above the text input (intentionally above it) and the user clicks options in it, when they're done it disappears and fills in the input. There is a problem with this in IE, when the widget appears above the input, the field's caret (blinking text input cursor for the field) shows through the widget. The widget is a normal html/css dom structure. It still does this when I set the z-index for the widget to be above the text input. How can I get rid of the caret or make sure it doesn't shine through?
I don't want to set the focus elsewhere for the duration that the widget is shown because the widget requires that the input has focus.
Try setting the unselectable attribute to on while the widget is being shown, then to off at the end. It's an IE specific attribute, and if it works you should check it in IE 8, as I'm not sure if it's still supported.
Seems to me that a simple blur on that field or focus on a field in the widget would fix your problem.

Categories

Resources