Hello, Wondering if there's any not-too-hard way to edit non-form text in html 4. I know there's a contentEditable property that can be set in html 5, but I want better browser support than that will give me. It seems like gmail is doing something like this in their chat status indicator. This works properly on IE6 (which I don't believe supports html 5). Has anyone seen this done? thanks, -Morgan
A:
You can set the innerText or innerHTML property in javascript for most dom elements including divs and tables.
Jeremy
2009-02-06 19:49:12
right, but I want users to be able to type inside a div. I think it's doable just by watching keystrokes, but I don't really want to write the code to do that right now. Also, not sure if I can detect cursor position.
morgancodes
2009-02-06 19:55:31
A:
HTML5's contentEditable is modelled after the existing property from IE, which is also supported by (at least) Firefox and Safari, so you don't have to wait for HTML5 to be ‘supported’.
It's an incredibly ugly piece of design, but it works.
bobince
2009-02-06 21:14:39
and -- thanks! Sounds pretty safe. I think I'll go with it unless I get scared.
morgancodes
2009-02-06 21:25:44
It's ugly because it takes a simple form-editing process (that could work without any script) and makes it much more complicated and fragile. If you only need the user to be able to enter simple text (not styled HTML), don't use contentEditable.
bobince
2009-02-07 01:13:17
+1
A:
Have you considered using CSS to make a <textarea> look like something else? Just because something is a form control, doesn't mean it has to look like once. You can change the background, shadows, borders etc.
Jeremy DeGroot
2009-02-06 21:17:26
yeah, that will be my fallback, but it's going to be a very small field -- one or two words. I like the idea of using a div because it will be easier to make my widget auto-size itself that way. I'd like for it to expand to fit its contents.
morgancodes
2009-02-06 21:24:59
A div won't shrink-to-fit its content; a span would. Consider also a standard text input that uses JavaScript to resize itself on content change.
bobince
2009-02-07 01:11:33