Saving/restoring Caret Position In A ContentEditable Div
Feb 2, 2005
I have a contentEditable element, and am using setTimeout() to call a function which changes the innerHTML of the div. Problem is that changing innerHTML moves the caret to the end of the text.
I need to keep the caret pos so the user can keep typing. I tried storing the caret pos with
cursorPos=document.selection.createRange().duplicate();
And then later restoring it with cursorPos.select() - which is IE only, but it doesn't work because the content of the div gets changed between calls, and the behavior is undefined (it basically selects everything) ...
I have a contenteditable div, it has some paragraphs in it.Assuming a situation, when I click the button "set caret position", the main div will focus, the caret will start at position number 8 of second paragraph, which means the caret will appear after the word "draw".How would you do it?
I'm using a div with contenteditable=true, and I need to know where the caret is for operations like splitting the html contents of that div where the caret is. Ultimately, if a piece of text is selected, I'll want to split that html content on the selection start / end.jCaret only seems to work for textareas.Is this possible in a div?
Rather than have several different pages, an app was designed to have different sections, all on one page. To get to the different sections the browser is scrolled down. It may take several submits before everything gets filled out correctly. The user complained because the page would not scroll to the previous position, code was installed to save and restore the page position, but it doesn't always go to the same place. Sometimes it does. Sometimes it doesn't. Two text boxes are used to save position, and the page is regenerated with x and y as literals by the server. The problem seems to be what values are saved as the page is submitted. Code:
I wonder how to get/set the caret position of a textfield. I dont wanna paste something, but only set the caret position. With firefox I can do this stuff: textfield.startSelection = pos;With IE I dont have a plan how to solve.
I would like to determine where the current insertion point is in a text field.
Say I had a text field that held 80 characters. I would like to display to the user the current position of the insertion point at any point in the field.
I have found the TextRange object and have found examples of how to insert text at a particular location. I have not been able to find a way to return a number depicting the current location of the cursor.
I've been able to find for an editable HTML textarea for a WYSIWYG editor. It can save and restore the caret position. It works on FF3.5+, IE8, but does not work on Opera 11, Safari 5, or Chrome 10. Any ideas why? I'm just trying to find some code that works on FF3+, opera 10+, safari 5, chrome 8+, and IE7+.
I'm creating a custom text box.that's an easy thing to do for me but I encounter some problems on the javascript part.in the onfocus event of the textbox I try to get the caret position on the start.it works perfect on FF, IE and opera but I just can't get it to work in safari and google chrome. I found out both browsers use webkit but have no idea how you do it for the 2 browsers.I'm using asp.net ajax components for javascript and this works for the 3 browsers get_inputElement() = my textbox
I'm using contentEditable divs. I want to have a button a person can press, a modal window appears, some text from the modal window is selected, then it is to be inserted into the contentEditable div in the location the cursor was at before pressing the button. So how can I save that spot so I can insert there?
Is it possible to make a SELECT box editable, where a user can type their own entry to be acted upon on top of being able to select an option of course?
Does a contentEditable DIV have the notion of an internal document? I'm trying to convert code that uses an IFrame.contentWindow.document to use the "document" inside a contentEditable DIV but they don't seem to be similar beasts. Eventually I want to add stylesheets to the contentEditable DIV as well as event handling. I'm porting an IFrame editor to a contentEditable DIV based editor.
On an HTML page with 2x different forms, how can I redisplay the same page after a submit, restoring the values from BOTH forms even though only one was submitted?
I have an existing PHP program that I am modifying, and need to redisplay the same page after a submit (the button that submits is a "change shipping" button, that allows the user to continue with the rest of the page). The problem is that there are TWO forms - the one that allows you to change shipping, and the other where the user can fill in the billing address. Making this into one form is not really an option, due to how the program is set up.
Since they are 2 different forms, submitting the "change shipping" form does NOT bring the billing address fields to my PHP code in the POST. This makes restore difficult.
I have a couple of kludgy ideas on how to work around this (mostly javascript based - e.g. setting hidden fields in the "change shipping" form when the user is changing the billing fields). However, I was wondering if there were any other easy solution to acheive this.
how to save form values in cookies, etc. for use when re-displaying the forms. for example, after an error has been detected. Naturally, PHP allows you to do this with $_SESSION variables.
But no one seems to have cracked the problem with FORMs having file uploads. Browsers will send the file to the server and the name, but not the path on the client computer (I suppose for security reasons).
So, if you want to re-display the page, you can fill in all the form data in your PHP script so that the user doesn't have to re-enter everything. But, since your PHP script only knows the NAME of the uploaded file, and not the path, whatever your fill in for the "xxx" in <input type="file" value="xxx" /> will be wrong.
I haven't used much Javascript before and I have a question about the following code. I've taken it from this tut [URL] and changed it a bit so it applies an expand/collapse functionality to a floating sidebar on the side of a website I'm working on.
When I remove the background on the toggle function, it refuses to come back. I have a feeling it's a simple solution, I just don't know what syntax to fill into the second part of the conditional to restore the background image. I've tried display, show, an actual path to the image...
<script language="JavaScript" type="text/javascript"> function toggle() { var bar = document.getElementById('floater'); var barText = document.getElementById('f_news');
i,m trying to make a map who show me as position A and a target adress as point B.I have made it so i can choose adress a and adress b from a dropdown but i want to automaticly load my position as possition A then choose position B from a dropdownlist. How can i do this ?
Trying to create a method/function how ever you want to call it, that will allow me to clear input values on inputs with focus() and restore the input values if nothing is entered or keep what the user types on focusou().[code]
in a DHTML Editing control (MSIE), I need to "extend" the caret to the nearest text character in order to obtain a text selection (and than a textRange object with the createRange method).
This is needed because I have a set of functions doing operations within the edit control's rich text. But all the functions need to start from a selected text (for example, adding a table row). My aim is to get the things work also if no text is selected from the user. But I could not find a way to have a selected text starting from the simple cursor position.
Does jQuery provide an abstraction for getting and setting the cursor for editable content div's? And if not, any assistance on how to do this? I really just want to pass the "id" and a cursor value to set it... or just the id to get the cursor value. Basically, I'd really like a high-level interface because trying to get it to work on Firefox alone is a massive pain :(
The fundamental problem is this:
If you have a div that contains text and other html elements, if the user's selection encompasses text and html, it won't do anything. I don't even think it registers.
Even when you do get a selection though, we can only find the cursor value within that range. So if there's html elements that are siblings to the left of it, the number of positions isn't accounted for.
I was I could just "get the selection information" and "store the selection information". When I try that, it still doesn't work :/
I have contentEditable="true" on some span tags on my page. The idea is to allow admin users to edit content inline on the page without having to send them to a giant form page. When only using contentEditable="true" it works fantastically. You can click into the span and type away. Now, the admin users want the text to be selected in the span once they click into it or bring focus to it by tabbing. I'm using the following function onclick and onfocus to get this working:
Code: function selectText(el) { var span = $(el); // FIREFOX if (Browser.Engine.gecko) { var div = document.createRange(); div.setStartBefore(span); [Code]...
I'm trying to emulate exactly how a div with the attribute contentEditable = "true" would operate using a textarea...trying and failing. I found some code somewhere which attempts to do something like his but it isn't working well for me.
I want to do this without jquery and with javascript only. The best example I can think of is Facebook's text area that you use to write on somebody's wall.
I'm new to javascript and am not sure why this works in firefox and not chrome. I am trying to create a script that keeps an object fixed horizontally while bing positioned absolute vertically. if I replace the toPP variable in document.getElementById('fire').style.top = toPP; with say '50px' it will move the element down 50 pxs, but how I have it currently it doesn't do anything in chrome
<script type="text/javascript" > window.onscroll = function() { if( window.XMLHttpRequest ) { var x = 0 -document.documentElement.scrollTop; var toP = String(x); var toPP = toP + "px";
