HTML - 2 elements focused at the same time - javascript

I'm slightly rewriting TinyMCE editor so that it better suited my needs.
One of the changes I want to do is font size input - no select but straight input where you would write any value you want.
I began to experiment with TextBox, but there is a problem.
When I go into that text box, selection from editor is lost, so any change is applied to nothing.
Is there some possibility how to access the text box and not lose the focus in the editor, or some other workaround?
Dialog is not the possibility, as it would completely beat the purpose of simplicity.
Thanks for any advice in advance.

No, it's not possible to do as such, but you could maybe re-ceate this functionality with some javascript+css. That may be a bit tricky though, so I would suggest leaving it for later on and go further on actual functionalities of whatever you're developing.

You can try and save the selection, and then restore it once the the user completes the input.
function saveSelection() {
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
return sel.getRangeAt(0);
}
} else if (document.selection && document.selection.createRange) {
return document.selection.createRange();
}
return null;
}
function restoreSelection(range) {
if (range) {
if (window.getSelection) {
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (document.selection && range.select) {
range.select();
}
}
}
Make sure you always save the selection by recalling saveSelection when the selection changes:
document.getElementById("editor").onmouseup = function () {
tinyRange = saveSelection();
}
document.getElementById("btn").onclick = function(){
restoreSelection(tinyRange);
document.getElementById("editor").focus();
}
check out this jFiddle: http://jsfiddle.net/SpacePineapple/5QLDT/

Related

Removing background-color from all the text in the page, regardless whether we have a selection or not

We have the following Javascript code:
function makeEditableAndHighlight(colour) {
sel = window.getSelection();
if (sel.rangeCount && sel.getRangeAt) {
range = sel.getRangeAt(0);
document.designMode = "on";
sel.removeAllRanges();
sel.addRange(range);
}
if (!document.execCommand("HiliteColor", false, colour)) {
document.execCommand("BackColor", false, colour);
}
document.designMode = "off";
}
// This is the highlighting function. It takes a color as an argument.
function highlight(colour) {
var range, sel;
if (window.getSelection) {
try {
if (!document.execCommand("BackColor", false, colour)) {
makeEditableAndHighlight(colour);
window.getSelection().removeAllRanges();
}
} catch (ex) {
makeEditableAndHighlight(colour)
}
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
range.execCommand("BackColor", false, colour);
}
}
// This returns the highlight to transparent (no highlighting) when the user clicks away in the document.
function body() {
document.getElementsByTagName("body")[0].addEventListener(
"click",
function(event){
highlight('transparent');
}
);
}
It works like this:
When there's text selected in a page, if you press a button (say an extension popup) then that text gets a yellow highlight and is automatically deselected.
That's where the problem comes in.
Because the text is automatically deselected, I cannot revert the highlight back to the same text (since there's no selection anymore)
So the focus of this question is on the last part, namely:
function body() {
document.getElementsByTagName("body")[0].addEventListener(
"click",
function(event){
highlight('transparent');
}
);
}
This only works if I select the same text and click anywhere in the document.
How I would like it to work is to be able to click anywhere in the document, and any highlighted text to be set back to original (or transparent if original not possible).
I'm aiming for any text because I have no selection here.
So basically this function should work like this:
if selection present and button pressed > highlight the selection and automatically remove all selections.
when a click is registered anywhere in the page, remove any highlighting on any text, regardless of whether there's a selection or not.
Again, this code seems to work very good up until the last part, the 'removing any highlight present' part.
You can replace your call to highlight from body to have an extra parameter prevRange which is a global one. and then reset prevRange to be undefined after the call.
The signature of highlight can be
function highlight(colour, oldRange) {
and start like
function highlight(colour, oldRange) {
var range, sel, oldSelection;
if (typeof(oldRange) !== 'undefined') {
oldSelection = window.getSelection();
oldSelection.removeAllRanges();
oldSelection.addRange(oldRange);
}
sel = oldSelection || window.getSelection();
if (sel) {
The rest of the function can work with sel.
The old range will need to be stored in prevRange just before the deselection, and makeEditableAndHighlight can also get the optional parameter oldRange (and have a test similar to the one after the "function highlight(colour, oldRange) {" signature)

Saving highlighted text to a string

I'm making a web application that splits the screen into two windows, with one side a web based text editor and the other side just a normal window.
I am trying to find a way to be able to have a user highlight some text on the browser side and then auto-save the highlighted text into a string where I would then be able to manipulate the string.
Does anybody have any ideas? Any help would be greatly appreciated.
function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}
$(document).ready(function (){
$('div').mouseup(function (e){
alert(getSelectionText())
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Hello, this is a highlight text test
</div>
So you'll have two steps here.
Capture the mouseup event.
Return the selected text.
Whatever text is selected on the document can be accessed via the js call:
window.getSelection()
But this is browser specific. So you can use this code snippet to cover grabbing the selected text from all browsers.
function getSelectedText () {
var txt = ''
if (window.getSelection) {
txt = window.getSelection();
} else if (document.getSelection) {
txt = document.getSelection();
} else if (document.selection) {
txt = document.selection.createRange().text;
}
return txt;
}
I assume you are using a library like jQuery. So that can help with the mouseup events. You probably don't want to capture selections on the whole document. So you could bind to whatever element you need. Something like my jsfiddle here: http://jsfiddle.net/xh799/

How to unselect the text of a textbox when it gets focus, when tab is pressed?

I have a series of text boxes in a row, which are used to enter time. When the user comes back to an already edited text box, the browser highlights the text within that textbox.
How would I un-select the text in it when the text box gets the focus, and
Set the cursor to the beginning of the text within the text box?
I have tried the following ways but for no good:
In textboxfocushandler:
var html = $("#MyTextArea").val();
$("#MyTextArea").focus().val("").val(html);
Select handler for textbox:
if (window.getSelection) {
if (window.getSelection().empty) { // Chrome
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges) { // Firefox
window.getSelection().removeAllRanges();
}
} else if (document.selection && document.selection.empty) { // IE?
document.selection.empty();
}
I think the problem is that the browser doesn't select the text until after the focus handler has executed. You could try using setTimeout() to delay your code, like this:
$('input').focus(function() {
var $input = $(this);
setTimeout(function() {
setCaretPos($input[0], 0, 0);
}, 0)
});
jsfiddle demo
This uses the following method to set the caret position.
function setCaretPos(element, begin, end) {
if (element.setSelectionRange) {
element.setSelectionRange(begin, end);
} else if (element.createTextRange) {
var range = element.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', begin);
range.select();
}
}
If you decide you want the focus at the end of the text, you can use:
var end = $input.val().length;
setCaretPos($input[0], end, end);
Credit:
I got the code for the setCaretPos() function from the jQuery mask plugin. That plugin contains a .caret() plugin method that you could use instead.

window.getselection is not working in android

I am new to use html+javascript+jQuery. I am trying to use window.getSelection to get selected text but this is not working.
Can any one suggest solution for this.
Thanks in advance.
Just need simple line of code in java script which done your job
//I am using below line of code which works in both android and web browsers.
function getSelectedText() {
var selection = null;
if (window.getSelection) {
selection = window.getSelection();
} else if (typeof document.selection != "undefined") {
selection = document.selection;
}
var selectedRange = selection.getRangeAt(0);
console.log(selectedRange.toString());
}
NOTE : Don't call this method in post or inside any runnable interface as post or any runnable interface make delay in calling this method(Method call happens after browser selection release). Just call this method like
webView.loadUrl("javascript:getSelectedText()");
I know this is a very old question, but I get this as a first search result when I had tried to resolve the same or similar issue. I didn't find a solution here but after some time I realized that sometimes for phones there should be a short timeout between click and selection to make getSelection() work properly.
So e.g. instead this:
document.getElementById("element").addEventListener('click', function (event) {
window.getSelection().selectAllChildren(this)
});
You should use somethink like this:
document.getElementById("element").addEventListener('click', function (event) {
setTimeout(function(passedThis) {
window.getSelection().selectAllChildren(passedThis)
}, 10, this);
});
Maybe it save some time to somebody.
If you want to call a function right after a text selection, you can use the "selectionchange" event:
document.addEventListener("selectionchange", handleSelection);
It's working for android chrome and iOS safari.
Try
function getSelected() {
var text = "";
if (window.getSelection && window.getSelection().toString() && $(window.getSelection()).attr('type') != "Caret") {
text = window.getSelection();
return text;
} else if (document.getSelection && document.getSelection().toString() && $(document.getSelection()).attr('type') != "Caret") {
text = document.getSelection();
return text;
} else {
var selection = document.selection && document.selection.createRange();
if (!(typeof selection === "undefined") && selection.text && selection.text.toString()) {
text = selection.text;
return text;
}
}
return false;
}

Javascript functions return lines of function code or "{[native code]}," what am I doing wrong?

I am writing some code to find the user selection in a contenteditable div, I'm taking my code from this quirksmode article.
function findSelection(){
var userSelection;
if (window.getSelection) {userSelection = window.getSelection;}
else if (document.selection){userSelection = document.selection.createRange();} // For microsoft
if (userSelection.text){return userSelection.text} //for Microsoft
else {return userSelection}
}
I'm testing it in Chrome and Firefox, if I do an alert(userSelection) within the function or an alert(findSelection();) outside the function, it returns function getSelection() {[native code]}. If I do console.log(findSelection();) it gives me getSelection(). Is there something I've done wrong?
getSelection is a function... you need to execute it to get the selection?
if (window.getSelection) {userSelection = window.getSelection();}
Change it to
  if (window.getSelection) {userSelection = window.getSelection();}
(getSelection())
This is to get the text of the selection. Even with the typo fixed, you've got inconsistent behaviour: IE is returning the selection's text as a string while other browsers will return a Selection object that will give you the selection text string only when its toString() method is called.
The following would be better:
function getSelectionText(){
if (window.getSelection) {
return "" + window.getSelection();
} else if (document.selection && document.selection.createRange) {
return document.selection.createRange().text;
}
}

Categories

Resources