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?
Related
Lets say we inputted the values 'abacadabra' and 'chimichanga' in the form field
The autocomplete of the browser shows these values when we start to input 'abac..' or 'chimi..'
Can I check the values that was already inputted in the form in some internal variables???
If you're asking if there is a way for a website to retrieve these values, there is not. It would be a HUGE privacy breach and vulnerability.
If you're asking if there is a way for YOU to see these in your browser, often your browser has a setting where you can see these.
For Firefox, this Support Forum question leads to a plugin that allows you to edit your form history.
For Chrome, this PC World article goes step by step on how to find and delete specific entries.
Click the Chrome menu on the browser toolbar and select Settings
Click “Show advanced settings” and find the “Passwords and forms” section
Select Manage Autofill settings.
In the dialog that appears, select the entry you’d like to delete from the list. Click the “x” that appears at the end of the row.
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?
I am in the process of creating a chrome extension that allows you to click on context menu options when you are in an editable element. Clicking a context menu option automatically places some text where the cursor is.
The problem I am having is that the process for placing the text differs based on where the text is being placed. For example, If the text is being placed in a textarea, (like the one I am typing in now), the process is different than if I need to put the text in, say, a YouTube comment box, which is its own custom div and does not support the operations that I would use when editing the contents of a normal textarea
In my search for a flexible solution that would work the same for all elements that are in the editable category of the chrome.contextMenus API, I thought of the following Idea:
I should be able to do what I want if I store my variable in the system clipboard with document.execCommand('copy') and then paste it in wherever the cursor is with document.execCommand('paste')
The downside here is that the user would loose whatever they used to have in their clipboard.
I originally planned on just pasting the original contents into my own textarea, then restoring it once I am done with the clipboard, but there are 2 problems with this approach:
The user would loose whatever formatting they had originally
This would only work for text, not images.
Is there a way that I can save the contents of the clipboard that would allow me to copy them back to the clipboard at later time without the user noticing any modification to the content?
If I have any glaring misconceptions, please correct me as I am new to
JS, the DOM and HTML
I am making an extension that stores the selected text from the currently active webpage into localstorage, then when the user click on this selected text in my extension's popup, the extension will fire chrome.tabs.create and open the website where the selected text was selected. These functions work, but I don't know how to trigger the 'find' function when the new tab opens. I want the newly created tab to highly the selected text that my extension stored. I think there are two ways to do this...
somehow trigger the 'find' function that the browser by default has. The one with 'Ctrl+F" or 'Command+F" triggers and insert the selected text in there
edit the HTML of the newly created page by highlighting the selected text.
new_source = { "url" : tab[0].url, "title" : tab[0].title, "quote" : selectedQuote, "id" : idSource};
sources.push(new_source);
localStorage["sources"] = JSON.stringify(sources);
This is how I'm storing my information
You can't trigger Chrome's native find dialog, but you can invoke window.find(). The main differences between the native dialog and find() are
find() only highlights one of the matches in the page, whereas the
native dialog highlights all. To be precise, find() will begin by
highlighting the match nearest to the top of the document, and
repeated invocations will move it down the page.
find() will highlight the selected text in with the default blue color, whereas Chrome's find dialog highlights its matches in orange. However, this can be mimicked by modifying the background CSS property of the ::selection pseudo-class.
Depending on your use case this might be sufficient.
However, if you want to highlight a specific quote on the page, and need to account for possible duplicates of that quote, then it's a bit more tricky, and I'm not sure it can be done perfectly. You'll want to get the precise location of the selected text using window.getSelection(), find a way to identify its startNode and endNode across page reloads (if they have ids, this is easy, but if not you'll have to resort to hacks), and then when the page is reopened, use Selection.addRange() to restore it.
I am creating a small HTML editor using jQuery. I have created my own button-icons for:
bold
italics
underline
insert hyperlink
insert image
unordered list
ordered list
But I donot know how to get it working. My idea:
bold: when user clicks on this button, selected text in the editor box() should be replaced with <b> ..selected_text.. </b>. Otherwise, insert <b></b> at cursor position.
italic: when user clicks on this button, selected text in the editor box() should be replaced with <i> ..selected_text.. </i>. Otherwise, insert <i></i> at cursor position.
same as above for Underline
etc....
So my question is, how to get the selected text from TEXTAREA and how to replace it with the tags? And also, how to insert a text at cursor position (ie. at that blinking line) ?
This is same as the buttons present in Stackoverflow's editor, when you post some questions. (for example, try clicking on the BOLD button in Stackoverflow's editor, when you have selected a text and when not selected)
I strongly recommend using a JavaScript library which smooths out the cross-browser differences when working with ranges and selections: Rangy.
A cross-browser JavaScript range and selection library. It provides a simple standards-based API for performing common DOM Range and Selection tasks in all major browsers, abstracting away the wildly different implementations of this functionality between Internet Explorer and DOM-compliant browsers.
For manipulating selections in <textarea> and <input type="text"> elements, see see Rangy's poorly-named and svelter twin project, Rangyinputs.
How to get the selected text from TEXTAREA and how to replace it with the tags?
Check out the Rangy CSS Class Applier Module (and associated demo page).