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.
Related
When selecting text in the textarea cursor position and selection, I can get the read properties of textarea.selectionStart, textarea.selectionEnd and textarea.selectionDirection (Figure 1).
If you start dragging the selected text, an additional cursor appears, where the selected fragment will be transferred when the transfer is completed (Figure 2).
How do I get the position of the additional cursor at the 'dragover' event?
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/
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'm working on a drag and drop solution, but I don't want specific items to be dropped on. For that, I use the dragnot = "true" attribute in a div.
It works, however when an user drags a div on this dragnot div, I would like to change the cursor to not-allowed. But the cursor only updates after I dropped the div, not when I dragenter.
I have put up a JSfiddle where it's demonstrated. Try to move div A or div C into div B. You'll see the cursor changed after you dropped the div (mouse over div B again if you don't see the cursor change).
How can the cursor be changed realtime?
I have a long text field and what I want to do is that when a user types an '#' character a list of users appear just like a typical auto-complete. However I want the list of users to appear below the '#' character which could be 20-30 characters in from the start of the text box.
I've found many jQuery auto-complete plugins but none that position the list below the current caret position.
I can get the text field position using $('#textfield').position() and I can get the caret position using something like this but that gets the character index from the text value and not the pixel position.
How can I get the current carret position of a text field relative to the page in pixels in order to position an element below it?
relaying on this anwsear: Calculate text width with JavaScript
what you can do is have a div on the screen which is visible:hidden
then every time a new charecter has been entered to the textbox change the inner html of the div
so the textbox value and the div innerhtml will always be synced.
then when you want to popup your autocomplete you will add the width of the div. to the
offset left postion of the textbox.
and thats it...
and avcorse you will need that the div and the textbox will have the same font...
This jQuery plugin does what you're after:
http://plugins.jquery.com/project/caretPosition
I haven't tested it, but going by the code it looks like it creates a temporary <span> with the same content as your <textarea> (up to the cursor) and makes wild assumptions about font, line height, whitespace and word wrapping when measuring it.
You could try extending it to:
Copy the font, line height, whitespace and word wrap styles from the target <textarea>
Hide the temporary <span> without affecting the measurement by wrapping it in a <div style="height: 0; overflow: hidden;"> or positioning it absolute -9999px, -9999px
$(this).position().top ;
$(this).position().left ;
$(this).position().right ; etc... :-)