Develop Reference

Save caret position after html changes in contenteditable div

I am trying to create a div where, when the user right clicks on a word, it becomes red. This div is editable, so the user can change the text in it.
<div contenteditable="true" id="test"><span class="word">text</span></div>
So far, what I have done is, every time the event listener "input" is called, I loop through all the spans in the div and use regular expressions on their content to match them with (spaces)(words) or (words)(spaces). Then, i add a new span after the current one that contains the second matched part, and replace the content of the current span by the first matched part. I also add the class word to the span that contains the words, depending on the expression that was matched.
So Far this approach words, and I am able to right click on individual words to either put them in red or not.
My problem however is that when I insert and remove spans inside my contenteditable div, the location of the caret changes. The reason for this is probably because the length of the html inside the div changes more than the length of the text.
How could I make it so that after I type, paste or remove some text in the div, and that after my function separates the spaces from the characters in different spans, the caret remains exactly where it was.
In other terms, I would like to store the current caret position, modify the html(not the text) of my div, and then restore the previous caret position.
Does anyone have an idea regarding how I could proceed? Thanks for the help!

How to detect mouse click position in jquery

I am trying to make a website where user can post there article. I want them allow some html tagging. But as user may not know about html, I am using some button for automatic inserting the content, so that they can add some effect to their content. For example if any user wants to write some bold text he can click on a button named "bold" and code will be automatically inserted. Following is an image of what is my design.
Everything is working fine. I am adding all those code at the end. But it is not good while editing. Let user wants to add some bold text at the middle. So he expects to click at the middle and press the bold button, but even in the case I add my code at the end.
So is there any way to detect the mouse click position and adding my text right after that ? Any suggestion(I am using jQuery)?

In your mouse click event you can use the clientX and clientY variables to find mouse click points. It can be done as follows:
$("#myButton").click(function(e) {
alert(e.clientX + ", "+ e.clientY);
})
Hope that helps

If you are not using textarea, and I assume you already put the area (example: content_node) as :
content_node.designMode="on";
content_node.contentEditable= true;
Then, you just need use [document.execCommand], such as:
document.execCommand("FontSize","false",sSize|iSize);
document.execCommand("Bold","false",null);
Further reading: https://developer.mozilla.org/en-US/docs/Web/API/document.execCommand

HTML textarea prevent some text from being deleted

I am making a terminal window in HTML/JavaScript and am using a textarea for input. I would like to prevent sections of the text in the textarea from being deleted. For example, if I had the text in the textarea "C:\>Random Code" I would like to prevent the user deleting the "C:\>" text. Is this possible using javascript?

Assuming jQuery, this script will listen for keystrokes, and if any of the required text can't be found (ie: user tries to delete it) it will add itself right back in there:
var requiredText = 'C:>';
$('textarea').on('input',function() {
if (String($(this).val()).indexOf(requiredText) == -1) {
$(this).val(requiredText);
}
}

You cannot make a section of textarea uneditable (only the whole control).
You can use various JavaScript trickery (listening to keypress events and cancelling event using event.preventDefault if the user wants to do something that you do not want to allow)
Another solution is to, instead of having an undeletable section of the input, to automatically append (or prepend ) a predefined string to the user input (and conveneintly display it for the user in some way).
Update:
So, my solution would look like this:
var requiredText = 'C:>';
$('textarea').on('keyup',function(event) {
if (GetSelectionStart(this) < requiredText.length){
event.preventDefault();
event.stopPropagation();
}
}
Where GetSelectionStart is a function that tells the beginning of the selected text (or caret position, if no text range is selected). For some possible implementations, see e. g. Caret position in textarea, in characters from the start
This function assumes that requiredText is always at the beginning of the string. But of course, it can be adapted for more complex scenarios.

I change some text inside draggable node, then i drag this node in another container and the old value is back

I have a dojo.dnd container (UL tag). inside of it i have an tag (in LI tag), i change the value of this INPUT in browser and then i drag this LI to another container. After dropping i see the old value in my INPUT field. Could you help me not to lose a new value in input field
thanks
BEFORE DRAGGING, AFTER VALUE CHANGING
AFTER DROPING

I'd guess that the space is breaking your code. Is the data URL encoded? Try replacing the space with "%20" and see if you still get the error.

How to append text in TextArea at cursor location using Javascript

I have a TextArea, textBox and a button. TextArea has some text e.g This is a cat.
Now my requirement is If someone set cursor position in TextArea and enter text in textbox and click on button the text should be append in cursor position instead of last. e.g.
TextArea: This is a cat.
Cursor position: after "a"
Entered Text in TextBox: black
Output: This is a black cat.
How can I do this using javascript.
Thanks in advance.

I've answered this before:
Inserting text at cursor in a textarea, with Javascript
One extra note is that IE will lose the caret position by the time a click event fires on a button. To get round this you can either use themousedown event instead, or make the button unselectable by adding an unselectable="on" attribute.

Using Google: How do I add text to a textarea at the cursor location using javascript
Copy the code from the above post (The one by Tim Down) and replace
insertTextAtCaret(textarea, "[INSERTED]");
with
var textBox = document.getElementById("your-textbox-name");
insertTextAtCaret(textarea, textbox.value);