0

Is it possible to alter the line that the user is currently on in a textarea, separate from any other line in the textarea? Image demonstration:

Click here for the image...

enter image description here

If it is possible, would you mind showing it to me on http://jsfiddle.net/ ?

Thanks in advance.

Jared Farrish
  • 48,585
  • 17
  • 95
  • 104
Ninjiangstar
  • 225
  • 1
  • 3
  • 12
  • 2
    We're not just going to give you some code... What have you tried? Show us something you already have or already came up with. –  Apr 11 '11 at 21:06
  • Probably not with a textarea. You may need something more like a WYSIWYG editor where you can control the HTML with JS in a tighter way. – Alex Wayne Apr 11 '11 at 21:07
  • This should help: http://stackoverflow.com/questions/401593/javascript-textarea-selection – Jared Farrish Apr 11 '11 at 21:08
  • No, we can't show you on jsfiddle.net, because that server isn't responding. Or maybe that's just me. – rockerest Apr 11 '11 at 21:10
  • I think Squeegy is probably right, you're describing something that is non-trivial if what you want is to highlight/bold a line/paragraph separate from the rest, while still allowing someone to live edit/type into it. TinyMCE accomplishes this, for instance, by showing you a graphical HTML view while actually handling the textarea in the background, where you can't see it. So you're typing into the hidden textarea, while the view you see is generated from that. – Jared Farrish Apr 11 '11 at 21:14
  • @rockerest jsfiddle.net is working (for me at least). – Ninjiangstar Apr 11 '11 at 21:16
  • @Ninjiangstar - It also wasn't coming up for me around the time rockerest posted that; they must have had an issue that just got resolved. I'm able to get to it now. – Jared Farrish Apr 11 '11 at 21:17
  • @Jared: You don't type into a hidden textarea with the MCE-type editors. You're typing into a `
    ` with "ContentEditable" set to true. The hidden textarea is there to support JS-deprived clients, so at least they get a textbox as a backup.
     – Marc B Apr 11 '11 at 21:19
  • I did consider those editors, but it was a little too complex, and I didn't want to have to install megabytes of scripts in order to make it work. Also I didn't want to include their built in extra-features... I considered counting the amounts of /n but there would be a problem with my wrap... probably counting /n would be the best idea for now. – Ninjiangstar Apr 11 '11 at 21:21
  • @Marc B - Oh I see. So it's actually producing the html and displaying it all at once? So what the poster is asking for may not be all that difficult? – Jared Farrish Apr 11 '11 at 21:21
  • It's not trivial. internal text-handling via javascript is pain to get going right in a cross-browser fashion (the usual IE v.s. everyone else type things). But you can try it yourself. Fill a div with some random text, and a small JS snippet to do `div.contentEditable = true`. You'll be able to start entering/deleting text in the div immediately. All the other fancy wysiwyg stuff is accomplished via JS. – Marc B Apr 11 '11 at 21:26
  • @Marc B - When I inspect a TinyMCE edit pane, it's showing as an iframe, with the body of the iframe being the edit region. The iframe body has an event handler for isContentEditable. – Jared Farrish Apr 11 '11 at 21:34
  • jsfiddle of contentEditable: http://jsfiddle.net/userdude/P39Xr/ – Jared Farrish Apr 11 '11 at 21:35
  • Most any block-level element can be made content-editable. Probably they're using an iframe so the parent page's CSS doesn't affect the stuff being edited. – Marc B Apr 11 '11 at 21:35
  • @Marc B - I think that if all the OP wants to do is allow for regular text editing (and forget about things like ctrl+b for bold, etc...), then maybe a solution wouldn't be too difficult. I've never really worked with text ranges, so I'd have to work on it for a while to figure it out, but it seems less daunting if it's just a DIV with bold HTML. Pretty limited, but maybe not that difficult. – Jared Farrish Apr 11 '11 at 21:46

1 Answers1

1

Expanding on one of my previous answers, and borrowing code from this answer:

Live Demo (v0.2)

Known Bugs/Limitations:

  • Only tested in FireFox 3.6.x
  • Requires the field_selection jQuery plugin (plain javascript code for caret position is a pain)
  • Matches lines that begin the same as the current line. (likely fixable)
  • If the cursor is on a completely blank line, it will not fade anything out. (likely fixable)
  • If the cursor is at the end of a line, it will fade everything out. (likely fixable)
  • Only triggers on keyboard actions (not mouse) (didn't code this part yet, may not be possible)
  • Does not play nicely with the mouse. (due to z-index and focus)
  • Doesn't work properly if there's only 1 character on the line (silly mistake on my part)

jQuery/JavaScript isn't really my strong area, so if anybody can provide some fixes to get it working better, I'd really appreciate it. :)

Community
  • 1
  • 1
drudge
  • 35,471
  • 7
  • 34
  • 45