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!
Related
Other than by wrapping each character with an html element, is there a way in javascript/jquery/etc to tell which letter in an element was clicked on?
Say you've got a heading -- "<h1>Happy</h1>" -- how can you tell which letter was clicked on, i.e., the user clicked on the second p or the a --without tag-wrapping each letter.
All the solutions that I've found suggest wrapping each letter in an html element (presumably a span), but that requires some pretty horrific html (even if you automate generating it) -- i.e., <h1><span id="letter00>H</span><span id="letter02">a</span><span id=letter03>p</p>...etc...</h1>. Surely there is someway to record letter positions as the rendering engine is drawing them and then relating those to clicks in the viewport.
I think if you used an <input type="text"> you have a selectionStart property which contains the character index of where your cursor is at. With html you can modify the textbox to remove the border and such so it doesnt look like a textbox. selectionStart and selectionEnd will help you figure out if any of the text is highlighted as well.
I want to have a textarea pass along any overflowing text to another textarea which is added after the current one, like how a word processor creates a new page when you reach the end of the current page. I've thought about how to achieve this and the first thing that comes to mind is to add a new textarea after reaching the end of the current one and place the cursor at the start of the new one. The only thing is, I don't know how I would go about processing certain events such as:
Select text across multiple textareas.
Paste text near the end of one textarea and correctly split it so that part of the text is pasted in a new textarea.
Remove empty textareas except the first one.
Is there an easier way I could go about doing this? Is there any way I could perhaps style a single textarea so that it just looks like there is a space between two lines to give the illusion that there are more than one textareas (that I could also style individually)?
I have a textarea in which text pieces (stored on each data-code attribute) are appended when clicking on an specific DIV:
$(document).on('click', '.extrasPanel .contentVars div', function(e){
varCode = $('.active').attr('data-code');
varText=$(document).find('textarea').val();
$(document).find('textarea').val(varText+varCode);
checkCounter(e);
});
Once a .contenVars div is clicked, its data-code value is added to whatever is typed on textarea, and to keep typing the user must click again on the textarea.
I would like the user to keep typing after importing this pieces of text widthout needing to click back on it, so that the cursor remains on the last position, after the last imported character (as if you would have pasted it).
I have tried adding e.preventDefault; at the end of the function, with no possitive result.
If you're using jQuery, you can try .focus()
jQuery('textarea').focus();
May this link will helps you..
jquery-caret.js
This is a very simple lightweight plugin to allow you to move the caret (or cursor) position in an or element
$('textarea').caretToEnd();
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.
I have a <div id="one">this is a sentence</div>
I have a textbox for userinput, if the user types a word which matches any word in div, eg: if user types "this", which is also there in div value, the background color of "this" should be changed, using Javascript
Thanks
Sunny.
Try this:
Connect the textbox to a onkeypress event
In the event function, do an filter for each word that is typed, and match it to words in the div.
For each matched word, replace the word in the div with <span style="background-color:yellow;">word</span> by modifying the content of one.innerHTML.
Note, before you modify the div, you should store the original content in a global variable that is used as base for the matching, otherwise, the matching will be cluttered with the <span...> tags.