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!
Related
Does anybody have workable solution to get or set cursor position in contenteditable div with elements inside?
What I going to do is to create twitter-like field where I will insert on # sign pressed. Problem is that browsers are pretty buggy with contenteditable attribute, so I cant rely on them for insert. So my algorithm is:
When # pressed
GetCursorPos
get content of div as a string, split it to two halves
Insert string with span between halves
Do $(div).html(new_content) - cursor will be dropped to beginning
move cursor to old_cursor + span's text length
Problem with 2 and 5. I checked following questions:
Set cursor position on contentEditable <div>
How to set caret(cursor) position in contenteditable element (div)?
Set the caret position always to end in contenteditable div
How to move cursor to end of contenteditable entity
contenteditable, set caret at the end of the text (cross-browser)
And many more... There is NO workable solution (FF, Chrome, IE) for setCursorPos(elem, pos) - everywhere is move to the end or save and restore. Also I have getCursorPosition, but sometimes in chrome it gives incorrect results, so this function appreciated also!
Thanks a lot!
I have a text area, and I have two buttons.
I want to scroll 10px horizontally (to the right) when the button is clicked, and to the left (also 10px) when the second one is clicked.
what do you mean by text area?
Is it the <textarea> elemnt or do you just have a div or a span with some text in it?
in any case if you just want to scroll contents left or right, you might want to use scrollLeft property on a container.
element.scrollLeft += 10; will scroll to the right.
element.scrollLeft -= 10; will scroll to the left.
If you give a more clearer description of what you are trying to do, then maybe people here can help you out better.
Possible using the doScroll method.
http://www.roseindia.net/javascript/method-doscroll.shtml
I have a textarea with a scrollbar. I need to change the position of your cursor in the textarea with javascript AND scroll the textarea so your cursor is visible. I am using elem.selectionStart and elem.selectionEnd to move your cursor, but when I move it to a point that is not visible, the textarea does not scroll so the cursor is visible.
More details (probably TL;DR)
I am creating a slideshow editor and have a preview of the complete slideshow next to an editor (textarea with scrollbar) for the content. As you move your cursor through the textarea, the slideshow changes slides so you are always viewing the slide that you are editing. I need to get it so changing the slide (using buttons) moves your cursor so you can see the code that generated that slide.
// slideBoundries has numbers which are the indexes where the slides begin/end
// eg: [0, 81, 140, 250] for slideshow with 3 slides
if (doc.editor.selectionEnd > slideBoundries[curSlide] &&
doc.editor.selectionEnd < slideBoundries[curSlide + 1]) {
return;
}
doc.editor.selectionStart = slideBoundries[curSlide];
doc.editor.selectionEnd = slideBoundries[curSlide];
I could just count the number of newlines in the file so I know how far to scroll down, but there are many lines that are long and take up multiple lines. I am using a monospaced font so counting the number of newlines and lines that take up multiple lines, but I would like an easier way. Is there a function I could call to mimic what happens when the user moves their cursor as the textarea always scrolls to that point when the user clicks...
EDIT:
Due to popular demand, here is a fiddle: http://jsfiddle.net/tShQ2/
The method I'm going to use to fix this issue is create a phantom textarea that has same width, but autosizes to height. It has to be visible or else it won't work, so make it abs position and move it off screen. Then put the text before the desired cursor position in it. Then scroll the real textarea to the height of the phantom textarea.
Your solution is a good one, but let me suggest a couple of things to make it easier.
Use a phantom div, rather than a textarea, since a div will autosize automatically. Just make sure to match the styles.
To hide your phantom div use:
visibility: hidden;
position: absolute;
This has the same effect as display: none, while allowing the div to have a height.
One more thing. For IE, you can create a range from the selection and scroll to it explicitly:
document.selection.createRange().scrollIntoView();
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... :-)
I've written a simple JS function that places the cursor at the end of the contents of an input box when it receives focus (the most common action in the box being to append). I haven't checked in IE, but when there is more text than is visible, even moving the cursor to the end of input doesn't scroll the view to the end of input in firefox 3.6.
Any idea how to do this?
P.S. And no I'm not using JQuery, nor is it an option ;)
Found a solution here using different wording (caret instead of cursor)
You can scroll by assigning to the textarea's scrollTop property:
// scroll to bottom
elt.scrollTop = elt.scrollHeight;
Firefox and Safari also offer scrollByLines, and IE has doScroll, but the scrollTop property is cross-browser and simpler to use.
Personally, I don't like it when the cursor is moved for me to the end of a textarea. If I want it at the end, it takes a fraction of a second to do it my self. It takes around a second to move the cursor from the end to somewhere in the middle (the end is a larger target, thus takes less time to hit). Unless the textarea has a special purpose, I wouldn't bother with the append-on-focus function.