If I have a selection object from a textarea (with a class of my-text-area) using window.getSelection(), if this selection loses focus (say if the user clicks on another input field), is there a way I can set this selection again programmatically?
I've tried doing something like this:
When I have focus:
var currentSelection = window.getSelection();
After I lose focus and want to set the selection again:
var range = currentSelection.getRangeAt(0);
range.selectNode($('.my-text-area')[0]);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
This seems to select everything in my textarea though, not just the small selected area initially.
Just found the excellent Rangy library, that contains a Selection Save and Restore module that does exactly this: https://github.com/timdown/rangy/wiki/Selection-Save-Restore-Module
Related
I have some javascript which works fine in Chrome/Firefox so that when a user focus's on a contentEditable div, the entire contents get highlighted. In Safari, however, I can see it get highlighted, then quickly the selection get's overridden to where the user clicks.
The following runs in onFocus:
const selection = window.getSelection(); // Shouldn't be undefined, but I guess could be?
if (selection) {
const range = document.createRange();
range.selectNodeContents(event.target);
selection.removeAllRanges();
selection.addRange(range);
}
I'm rolling my own generic wysiwyg editor but Im stuck selecting some text. I'm using a div with contenteditable set to true to enter the text into. The problem is I'm using a <var> tag to highlight some text that the user is supposed to delete and rewrite in their own words. When the text inside the <var> tag is clicked it highlights it as I expect but when you hit backspace it only deletes the text and not the tags (<var>). How can I tell the selection to grab a few more characters on each end of the selection so it also deletes the <var> tags? I'm using the following to make the selection happen.
var range = document.createRange();
range.selectNodeContents(elem);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
Placed function on the div's click event.
Selected the <var> tag.
Used .selectNode rather than .selectNodeContents.
Browsers handle it differently though. Some will add <i></i> tags when you enter more text, others don't, but this does remove the <var> tag completely....
var myDiv = document.getElementById("myDiv");
var elem = document.getElementById("myVar");
myDiv.addEventListener("click", function() {
var range = document.createRange();
range.selectNode(elem);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
});
<div contenteditable="true" id="myDiv">
Hello, this<var id="myVar"> is a test</var> of the editor
</div>
My goal is to change the font-format of the selected part of the input text using jQuery.
plz show me the way that works in firefox(if there isn't a way for it doesn't matter...). my problem is getting the selected part (ranges) and working with that ranges but i am not sure if its this way.plz show me the way.
var userSelection;
if (window.getSelection) {
userSelection = window.getSelection();
} else if (document.selection) { // Opera
userSelection = document.selection.createRange();
}
i am designing a full text editor using html.
I would like to be able to preserve the users' selection when I change the contents of an HTML element. If the element is updated while the beginning or end of the selection happens to be inside, the entire selection is lost. This also happens while dragging to create a selection, so that if the user is dragging a selection and the element's inner HTML is updated while the cursor is over the element, the user must start over.
I have a <span> that contains a time in the format 'hh:mm:ss am' and is updated each second. The length of the text never changes, so that isn't an issue.
I have tried the following:
var s = window.getSelection();
if (!s.isCollapsed) {
var range = document.createRange();
range.setStart(s.anchorNode,s.anchorOffset);
range.setEnd(s.focusNode,s.focusOffset);
}
document.getElementById('time').innerHTML = new Date().toString();
if (typeof range != 'undefined') { s.removeAllRanges(); s.addRange(range); }
It's the best my research has yielded, but it doesn't seem to make a difference.
What should I do to prevent the selection from vanishing if it happens to start or end in this span?
You need to set the selection again: range.selectNodeContents(newNode);
newNode = document.getElementById("[span id]");
Is it possible to detect what text has been selected in a text area using Javascript? I'm looking to show the user controls only when they have selected text
I've written a cross-browser function for getting the text selected in a textarea or text input and after some toing and froing the final version is I think the best one I've seen. I've posted it on Stack Overflow a few times before. Here's one example: Is there an Internet Explorer approved substitute for selectionStart and selectionEnd?
To detect when the user makes a selection in a textarea, you can use the select event:
var textarea = document.getElementById("some_id");
textarea.onselect = function() {
var selection = getInputSelection(textarea);
var selectedText = textarea.value.slice(selection.start, selection.end);
console.log("Selected text: " + selectedText);
};