I'm trying to use Javascript to replace the selected text in an arbitrary selected TEXTAREA node in Chrome (! not a content editable div !) The code fragment I see repeated in lots of places to replace selected text basically does this:
var sel = window.getSelection();
var range = sel.getRangeAt(0);
range.insertNode( document.createTextNode("test "));
However, this does not work for input fields such as TEXTAREA or INPUT TYPE=TEXT. The text is inserted BEFORE the TEXTAREA instead of inside it.
There is an alternative method to modify the selection text inside a text area using textarea.selectionStart and textarea.selectionEnd. However, these require figuring out which textarea element is actually active/selected. Chrome/Webkit document.activeElement seems to be broken and has been broken for a long time. I can't figure out any workaround to find the "currently selected textarea". See the bug here...
http://code.google.com/p/chromium/issues/detail?id=14436
You can see a micro-demo of the problem I'm trying to solve here.
http://dj1.willowmail.com/~jeske/_drop/insertIssue/1.html
http://ajaxandxml.blogspot.com/2007/11/emulating-activeelement-property-with.html
Any thoughts on this?
Given a webpage with an arbitrary bit of text selected in an arbitrary TEXTAREA node, without knowing ahead of time what textarea the focus is in, how do I find the active textarea and replace the selected text with some other text?
(( FYI: I'm using this code in a Chrome extension. An in-page javascript content script is extending the page javascript, so I have no idea what the page structure is ahead of time. It needs to work for any webpage. ))
I think the problem you may be having is that the active element changes as a result of clicking the button before your code runs. If you instead use the mousedown event and prevent the default button action, it works fine in Chrome:
http://jsfiddle.net/b3Fk5/2/
It appears that as of 8/23/2012, Chrome does not properly support activeElement, as it is often set to "body" when it shouldn't be.
There may also be some challenges because in my chrome extension, right-clicking to get a context menu might be altering the activeElement.
The solution was to provide a focus handler to create a more reliable activeElement in Chrome, and then use direct interaction with the TEXTAREA to handle the selection replacement.
var dActiveElement = null;
function _dom_trackActiveElement(evt) {
if (evt && evt.target) {
dActiveElement = evt.target;
console.log("focus on: " + dActiveElement.nodeName +
" id: " + dActiveElement.id);
} else {
console.log("focus else..");
}
}
if (document.addEventListener) {
document.addEventListener("focus",_dom_trackActiveElement,true);
}
function insertTextAtCursor(text) {
console.log("insertTextAtCursor : " + text);
if (dActiveElement.nodeName.toUpperCase() == "TEXTAREA") {
console.log("selection in textarea! id: " + dActiveElement.id);
var ta = dActiveElement;
var saveSelectionStart = ta.selectionStart;
var newvalue = ta.value.slice(0,ta.selectionStart) +
text + ta.value.slice(ta.selectionEnd,ta.length);
console.log("output : " + newvalue + ", len : " + newvalue.length);
var newSelectionEnd = ta.selectionStart + text.length;
ta.value = newvalue;
ta.selectionStart = ta.selectionEnd = (newSelectionEnd);
}
}
Related
This happens only in Firefox.
Important: I am saving the caret's position with rangy.saveSelection():
when click the content editable div
on keyup
when adding an external html element (as a node) to the content editable div
I need the position saved constantly through multiple means to be able to insert html elements on click (I have some tags).
When I click in the contentEditable div and the div is empty (first focus, let's say), I cannot see the caret unless I start typing. If the caret is at the end, I cannot see it either.
Another weird behaviour is that I cannot use the arrows to navigate between the text in the contentEditable div.
If I remove the functions which (constantly) saves the caret's position (on input, click etc.) the caret returns to normal (the caret is visible).
The problem appears when I start saving the position of the caret. Clearly I should be doing some sort of reset or a clear.. but from what I understand, those seem counterproductive (as from my understanding they destroy the saved caret location).
The content editable div
<div class="input__boolean input__boolean--no-focus">
<div
#keydown.enter.prevent
#blur="addPlaceholder"
#keyup="saveCursorLocation($event); fixDelete(); clearHtmlElem($event);"
#input="updateBooleanInput($event); clearHtmlElem($event);"
#paste="pasted"
v-on:click="clearPlaceholder(); saveCursorLocation($event);"
class="input__boolean-content"
ref="divInput"
contenteditable="true">Cuvinte cheie, cautare booleana..</div>
</div>
My methods/functions
inputLength($event){
this.input_length = $event.target.innerText.length;
if(this.input_length == 0)
this.typed = false;
},
addPlaceholder(){
if(this.input_length == 0 && this.typed == false){
this.$refs.divInput.innerHTML = 'Cuvinte cheie, cautare booleana..'
}
},
clearPlaceholder(){
if(this.input_length == 0 && this.typed == false){
this.$refs.divInput.innerHTML = '';
}
},
updateBooleanInput($event){
this.typed = true;
this.inputLength($event);
},
saveCursorLocation($event){
if($event.which != 8){
if(this.saved_sel)
rangy.removeMarkers(this.saved_sel)
this.saved_sel = rangy.saveSelection();
}
// if(this.input_length == 0 && this.typed == false){
// var div = this.$refs.divInput;
// var sel = rangy.getSelection();
// sel.collapse(div, 0);
// }
},
insertNode: function(node){
var selection = rangy.getSelection();
var range = selection.getRangeAt(0);
range.insertNode(node);
range.setStartAfter(node);
range.setEndAfter(node);
selection.removeAllRanges();
selection.addRange(range);
},
addBooleanTag($event){
// return this.$refs.ChatInput.insertEmoji($event.img);
this.$refs.divInput.focus();
console.log(this.input_length);
if(this.typed == false & this.input_length == 0){
this.$refs.divInput.innerHTML = ''
var space = '';
this.typed = true
this.saveCursorLocation($event);
}
rangy.restoreSelection(this.saved_sel);
var node = document.createElement('img');
node.src = $event.img;
node.className = "boolean-button--img boolean-button--no-margin";
node.addEventListener('click', (event) => {
// event.currentTarget.node.setAttribute('contenteditable','false');
this.$refs.divInput.removeChild(node);
})
this.insertNode(node);
this.saveCursorLocation($event);
},
clearHtmlElem($event){
var i = 0;
var temp = $event.target.querySelectorAll("span, br");
if(temp.length > 0){
for(i = 0; i < temp.length; i++){
if(!temp[i].classList.contains('rangySelectionBoundary')){
if (temp[i].tagName == "br"){
temp[i].parentNode.removeChild(temp[i]);
} else {
temp[i].outerHTML = temp[i].innerHTML;
}
}
}
}
},
pasted($event){
$event.preventDefault();
var text = $event.clipboardData.getData('text/plain');
this.insert(document.createTextNode(text));
this.inputLength($event);
this.typed == true;
},
insert(node){
this.$refs.divInput.focus();
this.insertNode(node);
this.saveCursorLocation($event);
},
As you can see in the saveCursorLocation(), I was trying to solve the scenario in which you click in the contentEditable div and there's no caret - which is confusing for the user.
// if(this.input_length == 0 && this.typed == false){
// var div = this.$refs.divInput;
// var sel = rangy.getSelection();
// sel.collapse(div, 0);
// }
It was a dead end - most likely because of my poor understanding of Rangy and how should I use those functions.
Expected behaviour vs actual results on Firefox
When I click on the contentEditable div I expect the caret to appear (while in the background to save my position). When typing, I expect the caret to appear after the last typed character while also on keyup to save my caret's position. Also I expect to be able to navigate the text via left/right arrows and see the caret when doing so.
All of these are generated by
v-on:click="..... saveCursorLocation($event);"
and
#keyup="saveCursorLocation($event);....."
If anybody believes that it would be helpful, I can record the content editable div and its behaviour in Firefox.
EDIT: I managed to isolate the problem and reproduce it into a JSFiddle - https://jsfiddle.net/Darkkz/6Landbj5/13.
What to look for?
Open the fiddle link in Firefox, then press one of the blue buttons (SI, SAU, NU) and then look at the input, the caret is not displayed.
Click the input, the caret is not displayed
While typing in the input,the caret is not displayed. Although, if you click in a word/in between content, the caret will be displayed
Apparently rangy's Selection Save and Restore module can't be used to keep track of the current selection while the user interacts with a contenteditable, like you want.
I digged into it a bit, and the problem is that rangy inserts hidden <span>s as markers, and updates the selection to be after the marker, instead of keeping it inside the #text node the user's editing:
<div contenteditable>
#text [This is something I typed <!-- selection is moved from here -->]
<span class="rangySelectionBoundary"/>
<!-- to here -->
</div>
Firefox has trouble displaying the caret in this scenario (I haven't found a bug about this specific issue, but here's a similar one where the caret is not displayed when the selection is between two <span>s).
Commenting this code out seems to fix the issue with the disappearing caret. It's unclear to me why that code is needed -- it was added before 1.0 in a large commit with its message saying: "Fixes for save/restore problems with control ranges and multiple range selections. Added demos for save/restore and CSS class applier modules." -- so I'm not comfortable to suggest fixing this in rangy (and since it's unmaintained for a few years, I don't have much hope in getting its author's input on this).
So I tried to figure out why you needed this in the first place, to suggest other solutions not involving rangy.saveSelection (for example, rangy's Text Range module provides getSelection().saveCharacterRanges(containerNode) that works without modifying the DOM.
It appears that you have a <div contenteditable> and some "buttons" (<span>s), clicking on which would insert some HTML at the caret position. The problem you were trying to solve was that when the "buttons" were clicked, the selection moved from the contenteditable into the button, and you were unable to detect the insert position.
Instead of storing and restoring the selection, you can instead make the buttons user-select: none - this will keep the caret in the contenteditable.
To test this, I commented out all references to rangy.saveSelection and rangy.restoreSelection and changed the this.$refs.divInput.focus(); call in the "button"'s onclick handler to run only when the contenteditable wasn't already focused by wrapping it in an if (!this.$refs.divInput.contains(document.activeElement)). See how this works in this updated fiddle:
https://jsfiddle.net/fjxsgvm2/
My current Chrome extension is supposed to programmatically insert text on user input. This works great, however, it mangles the undo/redo behavior of all text editors I've tried it on so far. So, the following routine:
type some text
insert some text programmatically
type more text
press ctrl-z thrice
does not always revert to a blank state. Very often it will get stuck somewhere in the middle. Its behaviour is mostly inconsistent.
Here's an MCVE of the content script:
function init() {
var $input = document.getElementsByTagName("textarea")[0];
if (!$input) {
console.log("No input element found.");
return true;
}
var $btn = document.createElement("button");
$btn.innerHTML = "Click";
$btn.addEventListener("click", function() {
var caretPos = $input.selectionStart;
$input.value = $input.value.substring(0, caretPos) + " test string " + $input.value.substring(caretPos);
});
$input.parentElement.insertBefore($btn, $input);
return true;
}
window.addEventListener("load", init);
<div><textarea></textarea></div>
(I also bundled it as a Chrome extension in case you'd like that.)
I want the undo/redo to function perfectly in both textarea as well as contenteditable nodes. I also tried document.execCommand in both insertText and insertHTML modes without any success. I've looked at the other two related questions but they do not answer my query. (q1, q2)
What else can be a possible solution to this problem?
Thanks to the helpful comments above, my problem was doing execCommand on pre-programmed weird editors like Facebook messenger box, tinymce, etc. They might have their own customizations interfering.
In normal text editors, document.execCommand should work fine, and support undo/redo. Use it like so:
document.execCommand('insertText', false, "text");
document.execCommand('insertHTML', false, "html");
I am having a scenario where I need to put cursor on text area and then click on tree view node on the same page to have selected node's text into my textarea where I placed cursor just before clicking on tree node.
I got many answers on Stack overflow including below,
Inserting text in textarea at cursor position if cursor placed else text should append at last in IE
Inserting text after cursor position in text areа
Insert text into textarea with jQuery
How to insert text at the current caret position in a textarea
Inserting text at cursor in a textarea, with Javascript
How do I insert some text where the cursor is?
FF and Chrome works fine with above solutions but IE 8 or lower version fails (didn’t check with IE9) if focus is moved to some other control.
There is below or similar implementation for IE in almost all posts:
(function ($) {
$.fn.getCursorPosition = function () {
var el = $(this).get(0);
var pos = 0;
if ('selectionStart' in el) {
pos = el.selectionStart;
} else if ('selection' in document) {
el.focus();
var Sel = document.selection.createRange();
var SelLength = document.selection.createRange().text.length;
Sel.moveStart('character', -el.value.length);
pos = Sel.text.length - SelLength
}
return pos;
}
})(jQuery);
Note : We also can use if(el.selectionStart || el.selectionStart == '0') instead of if ('selectionStart' in el) and if(document.selection) instead of if ('selection' in document)
But this will fail when focus is moved to some other control first and then executing it. In my case focus will be moved to tree nodes when user will traverse through nodes.
Is there any solution for this scenario?
I am thinking to write onkeyup and onclick on text area and save its cursor position into hidden field so when focus is moved to some other control, i will have hidden field to get cursor position of text area. I will post that here later, meanwhile if anyone has some good idea then please share.
Thank you in advance
As i mentioned above i have below code to make it working in IE as well,
(Also thought about having only onblur instead of these 2 events but it didn’t work as focus already lost when execution comes into my code to set hidden variable)
Below implementation It is working fine in my case.
if ($("#myTextArea").get(0).selectionStart == undefined) {
$("#myTextArea").click(function (e) {
$("#hdnTextAreaPosition").val($("#myTextArea").getCursorPosition());
});
$("#myTextArea").keyup(function (e) {
$("#hdnTextAreaPosition").val($("#myTextArea").getCursorPosition());
});
}
Above events (keyup and click) are in global script and will be attached only in case of selectStart is undefined
function getTextAreaCursorPosition() {
if ($("#myTextArea").get(0).selectionStart == undefined) {
return $("#hdnTextAreaPosition").val();
}
else {
return $("#myTextArea").getCursorPosition();
}
}
function insertToMyTextArea(textToInsert) {
$("#myTextArea").focus();
var cursorPosition = getTextAreaCursorPosition();
var myContent = $("#myTextArea").val();
$("#myTextArea").val(myContent.substring(0, cursorPosition) + textToInsert + myContent.substring(cursorPosition));
}
insertToMyTextArea is the main function i am calling on click of tree node.
Please share your views if any alternative solution is available instead of having events.
I would suggest using my jQuery plug-in for this in conjunction with some extra stuff to save the textarea's selection or cursor position before the focus is lost.
I've covered this exact case in a previous answer:
https://stackoverflow.com/a/5890708/96100
I am working on a web page which contains a list of items and sub items for display. In the Div element, I am setting up the values, image. Using the image show and hide option On click event handler is triggered. This seems to be working fine with IE9, but doesn't work with other browsers (FireFox, Chrome and safari).
<div id="Type_A Medicine" value="H" entity="Type A Medicine" onClick="showHide(this,'MIE_Type_A Medicine')"><img src='<%=request.getContextPath()%>/images/plus.gif'>Type A Medicine</div>
function showHide(ctrl,id)
{
if (ctrl.value == "H")
{
ctrl.value = "S";
ctrl.innerHTML = "<img src='<%=request.getContextPath()%>/images/minus.gif'>" +ctrl.getAttribute("entity");
showBlock(id);
}
else if (ctrl.value == "S")
{
ctrl.value = "H";
ctrl.innerHTML = "<img src='<%=request.getContextPath()%>/images/plus.gif'>" + ctrl.getAttribute("entity");
hideBlock(id);
}
}
function hideBlock(blockId)
{
var str = "document.all." + blockId + ".style.display='none'";
eval(str);
}
function showBlock(blockId)
{
var str = "document.all." + blockId + ".style.display=''";
eval(str);
}
I still couldn't figure out the difference with the list of browsers. Kindly help...
I'm guessing it is because you use an invalid ID syntax. ID's cannot have spaces. If you use invalid HTML you can't expect javascript to work the same way across browsers.
id="Type_A Medicine"
Also, you never post the code for showBlock or hideBlock where you pass the ID in. Can't tell what goes wrong there without code.
To retrieve non-standard attributes, you should use .getAttribute() rather than trying to access them as properties.
So ctrl.entity should be ctrl.getAttribute("entity") and the same for other non-standard attributes. Run this example in Chrome: http://jsfiddle.net/jfriend00/Lxna7/.
Also, you should remove the space from your ID value as that's not a legal character and makes the id unusable in many circumstances (where a space is a delimiter between identifiers).
Try closing correctly the image tags to see if that fix the problem:
<img src="path/file.html" />
I want users to only be able to select an entire sentences within my UIWebView. I'm using my own UIMenuItem (a bookmark button) in a UIWebView. I am going to save this bookmark (core data) and would like to determine which sentence/verse the highlight is in. I am laying out the html programmatically (building up from a sqlite database), and have a <span id="x"> (where x is a variable integer) surrounding every sentence. I know that the Amazon Kindle app only lets users select entire words. How can I do this?
Thanks!
Did you tried setMarkedText:selectedRange:?
Apple developer lib
Update:
While you can't use setMarkedText inside the UIWebView there is no way but using JavaScript. I don't know, if you can manipulate the HTML page that you are showing or not? you can add this script in the page. If you can't manipulate the page you should load an iframe inside your UIWebView that loads your actual page and after the iframe add this script.
Here is the script:
document.addEventListener('mouseup', function(){
if(getSelection().anchorNode != null ){
var sel = getSelection(),
range = sel.getRangeAt(0),
nodeValue = sel.anchorNode.nodeValue,
lastCharIndex = range.endOffset,
firstCharIndex = range.startOffset,
lastChar = nodeValue.substr(lastCharIndex, 1),
firstChar = nodeValue.substr(firstCharIndex, 1);
while(lastChar != (" " || ".")){
lastChar = nodeValue.substr(lastCharIndex, 1);
lastCharIndex++;
};
while(firstChar != " "){
firstChar = nodeValue.substr(firstCharIndex, 1);
firstCharIndex--;
};
range.setEnd(sel.anchorNode, lastCharIndex-1);
sel.addRange(range);
range.setStart(sel.anchorNode, firstCharIndex+2);
sel.addRange(range);
}
}, false);
I tested this on my iPhone and it was working fine.
Here is the Demo (just select something).
I spent a lot time on it. I hope you enjoy it.