I found this Fiddle and edited it.
At current on any keypress the div on left side of textarea appears ( gray color div ) at caret position where the text is written.
I want the div to appear on Keypress of Enter next to caret position everytime ( get the caret position and show div next to it on enter press ) and if any other key press disappear the div.
I'm bit confused how the keypress used here in this code.
here : http://jsfiddle.net/eMwKd/30/
Related
How do i move the cursor between div elements like Notion's editor?
<div>
hello
word
</div>
<div>hi</div>
<div>notion</div>
with the code as above, how to move the cursor to another div element when the cursor is moved with the arrow keys?
for example, suppose the current cursor is in front of "hello".
when the arrow key is pressed down, the cursor moves forward to "word".
if you press the down arrow key once more, the cursor moves to "hi", the content of the next div element.
You can't move the actual mouse cursor. That would lead to serious issues, as the website could just trick you into clicking on some specific elements you didn't want to click on.
It is still possible to change the focus to an element with Javascript or you can just highlight the selected element by adding and removing CSS-classes.
For Example:
.box:hover{
background: blue; /* make this whatever you want */
}
Exist way how to set caret pixel position in editable DIV with JavaScript (Angular, jQuery)? I look for this functionality many days.
Get caret position in pixel I can do with this (there is problem with autowrapped long text).
I need switch from one editable DIV to another with UP/DOWN key handler and I need same position of caret. Fe. if I have DIV#2 and caret position is after third X (30px from left), then click UP key. I need switch caret to DIV#1 on last line (computed with autowrap text) on same position from left (30px from left! not after third I). As on this animation:
Please, help me!
I have a contenteditable div with a span inside it.The div is of type input. The div also contains a button in the right corner.When you click the button a popup menu shows a list of emoticons and when I click on an icon I need to add it to the cursor position in the div. I have looked at Tim Down's solutions but couldn't get it to work.
Get caret (cursor) position in contentEditable area containing HTML content
and
Insert html at caret in a contenteditable div
The problem is that the div is not the only element on the page and is not necessarily on focus when user clicks on button to insert Emoticon. Also apart from the span tag the div may or may not contain text when the user clicks the button.
Any help to get the correct cursor position and insert the icon at the position is appreciated.
I have a textarea with a width of 800px and a height of 500px.
If I paste a text which needs height more than 500px then the scrollbar is being created in order to scroll up and down which is fine.
But If I paste something on the top then it jumps again to the bottom of the textarea.
How can I stop this behaviour?
Thanks in advance!
When the content is added the cursor is placed at the bottom of the textarea, thus it scrolls to the bottom.
To prevent this you need to place the cursor at another position. For example if you want the cursor to stay at the same position in the text while new text is inserted at the top you can get the length of the inserted text, add it to the current cursor position, then add the text and place the cursor at the sum of both.
In JavaScript you can do it like this:
Take the textarea.selectionEnd as the current cursor position
Add it to text.length
Insert the text
Set both textarea.selectionStart and textarea.selectionEnd to the sum from point 2
Here’s an example function:
function addText(area, text) {
var cursorPos = area.selectionEnd;
var textLength = text.length;
area.value = text + area.value;
area.selectionEnd = area.selectionStart = cursorPos + textLength;
area.focus();
}
I’ve also made a demo where you can first click anywhere in the textarea then type a text in the input field and then click the button. The text will get added and the textarea will be focused with the correct cursor position.
I have a div tag that is contenteditable so that users can type in the div.
If a user selects some text to make it bold, the following code is executed:
browser.execute("document.execCommand(\"Bold\");
document.getElementById(\"EditDIV\").focus()");
After the execution, the focus is lost and the vertical scrollbar in the browser moves to the top of the browser.
I want the cursor to stay at the text where it was before.
I tried the following:
Store the selection position x, y:
Code:
cursorPos=document.selection.createRange().duplicate(); clickx = cursorPos.getBoundingClientRect().left; clicky = cursorPos.getBoundingClientRect().top;
Restore the selection position:
Code:
cursorPos = document.body.createTextRange(); cursorPos.moveToPoint(clickx, clicky); cursorPos.select();
But this code finds the position of the selected text with respect to the beginning of the current view in the browser. Hence, the cursor stays at the same position but the text moves down.
It is expected to make the cursor stay at the text that was selected.