Show HN: Behave.js – Coding Behaviors for textarea elements

http://jakiestfu.github.com/Behave.js/

by jakiestfu • 13 years ago

180 72 13 years ago

jakiestfu.github.com

Permit• 13 years ago

I like this a lot. I really wish they'd add the tab functionality to Stack Overflow. I can't count the times I've tabbed out of the text box there.

danso2• 13 years ago

Ok I'll be the pendant that says it...you probably can't appropriate the image of Austin Powers for your open source library. Not that Mike Myers seems the type to flip out about it, but his movie studio probably is.

Otherwise, great work...and it behaves reasonably well even on iOS

codewright2• 13 years ago

I'll be the pedant to mention that a pendant is worn around the neck.

You like this? On-demand editing services: chris@edithero.com

Clickable: http://www.edithero.com/

aarondf• 13 years ago

Good hustling! (Serious, not sarcastic.)

Your comment was funny and provided value (now I know about your service). Well played.

gojomo2• 13 years ago

I'd guess a non-profit project with such small, incidental, reverent-without-being-misleading image reuse can wait until they receive a souvenir cease-and-desist letter, if ever, before worrying about the rights issues.

afandian• 13 years ago

The same day as this article is published. http://arstechnica.com/tech-policy/2013/01/six-year-old-danc...

tripzilch• 13 years ago

Someone had to point it out, yes. I had the same thought and it made me sad. That page is beautiful, quirky and funny, made with DIY love. It's a perfect example of the value of remix culture, adding a touch of originality (yes, originality) to brighten up an otherwise boring github page.

I believe the author picked the cross hatched texture background to match the rest, as well as the font and the muted retro green and orange-red, so it's not like it was a mere copy/paste job, either. More like (apart from the name pun) Austin Powers is just another ingredient, like the colour to paint with, the texture, the font, etc.

Further--this is a personal belief so take it cum grano salis--if one releases a blockbuster film, one of the (intended!) effects is having its iconography engrained in the public's mind and culture. Saying you cannot use imagery that has been force-fed into the public consciousness at all, is like getting hit by a fire hose and being told you're not allowed to drink or wash with the water. And I had this thought, having to fear being punished for using a certain icon to communicate your ideas, is a lot (but not exactly, I do hope you can see the similarities though) like what the Danish cartoonist had to fear when drawing Muhammed. (let me repeat: there's a lot of differences between the situations, but also an eerie similarity)

Anyway, it's a really great library, I'm looking forward to having an excuse to use it.

the1• 13 years ago

how do you know if that's Mike Myers in Austin Powers? It's the author in Halloween costume.

est2• 13 years ago

Now please add mouse-hover hint box, dropdown list for auto completion and I am sold

visarga• 13 years ago

If only TextWrangler had auto-completion and auto-pairing of brackets and quotes.

bink-lynch4• 13 years ago

Have you looked at Sublime Text 2?

http://www.sublimetext.com/2

I switched about a year ago and I am very pleased.

EDIT: This shows it off better: http://www.sublimetext.com/

jakiestfu12• 13 years ago

Elaborate on the hover hint box, please

est2• 13 years ago

Okay,

suppose this line:

    result = someFunction(param1, param2='ok')

mouse over to `someFunction`, a small box shows brief description of function, what it does, how many parameters are required, what does optional parameters do.

It's basically a richer version of <span title="text" alt="text"</span>

ctruman• 13 years ago

http://www.youtube.com/watch?v=F1lJFlB-89Q

nbashaw2• 13 years ago

This is awesome. I'm using http://ace.ajax.org/ right now in production and it's a huge heavyweight pain (but still the best thing out there). If only this had syntax highlighting i'd switch in an instant.

chr1• 13 years ago

Maybe you'll like http://kueblc.github.com/LDT/examples/generic.html? but if you fix undo, add bracket matching, etc it will become huge too.

Also wanted to ask why do you think that ace is a pain? I agree that it's big, but seems to work ok?

TomasSedovic• 13 years ago

Thanks so much for the LDT link, it's exactly what I was looking for (and thought impossible).

I can't speak for the GP, but my problem with ACE et al. is that they replace the textarea with their own HTML structure (e.g. a div for every line). I understand the reason why, but it means they have to reimplement all the textbox behaviour and they never get it completely right.

For example: when I double-click on a word in the textbox I'm writing this in, and then middle-click somewhere else, the word gets pasted there.

In ACE, it pastes a different text in a different location.

ACE is brilliant if you want to a full-fledged text editor. But it's an overkill if all you need is a normal textarea with some colours.

tantalor5• 13 years ago

> var editor = new Behave({

> var editor = Behave({

Is it a constructor or not?

tantalor5• 13 years ago

On further inspection, it must be a constructor.

The second case is incorrect. The function assigns to "this", which would be undefined in strict mode, or the global object. Very bad either way.

Remember kids: objects are your friend.

state• 13 years ago

I wish it could be var editor = now Behave({

jeffmess• 13 years ago

var editor = oh Behave({

jakiestfu12• 13 years ago

Thank you good sir. It is a constructor, I've fixed the sites

fidz• 13 years ago

Just curious who is the person in the background page?

tantalor5• 13 years ago

https://www.google.com/search?q=austin+powers

evincarofautumn• 13 years ago

You should have the option to make backspace delete a full level of indentation, if soft tabs are on.

jakiestfu12• 13 years ago

Yes, I will implement that tomorrow, thank you

MasterScrat2• 13 years ago

Keeping the indentation level on new lines would be nice too.

jakiestfu12• 13 years ago

Indentation levels should be converting line to line, is it not for you?

hilti• 13 years ago

Great landing page. Just add syntax highlighting and it'll be perfect.

evoxed• 13 years ago

Hey, this looks handy! I just wrote something kinda similar as part of an ad-hoc UI layer that just had to be done in HTML/JS. At first I was horrified, but by a couple hundred lines in I realized how nice it would feel to finally tame those meager input boxes into full on forces of good. ;)

valgaze• 13 years ago

Great tool and I'm enamored with the layout- scrolling background, AP stays with you.

Not sure how to repeat it every time but weird artifact quirk if one scrolls to the bottom on iPad safari & scrolls back up: http://i.imgur.com/Hby2ZsL.jpg

tantalor5• 13 years ago

The layout might be familiar,

http://meyerweb.com/eric/css/edge/complexspiral/demo.html

The Internet Archive pegs that page to October 2001. That's like 4 or 5 Internets ago.

nbashaw2• 13 years ago

That's just background-position: fixed; The background in this page scrolls but austin powers is position: fixed; bottom: 0; left: 0;

tantalor5• 13 years ago

Auto indent should indent when a newline is nested in parentheses, like this:

  foo(1,
      2,
      3)

jakiestfu12• 13 years ago

Right now, it is easy to add support for indentation breaks, but it would function like braces or brackets. I'll look into this for parenthesis tomorrow, thanks!

jakiestfu12• 13 years ago

Since posting and receiving positive feedback, I have added support for unindentation, and multi-line indent/unindent. Will see about adding more features tomorrow! Want to keep this light, it's almost there though. Next is IE support.

thewarrior• 13 years ago

Really good work . Was reading your code to catch up on some javascript , but didn't understand what you're doing here . Surely this is a bug ?

https://github.com/jakiestfu/Behave.js/blob/master/behave.js...

BOSH• 13 years ago

I like it very much. Simple and elegant solution. Will try to find a use for this lib.

user242• 13 years ago

It absolutely crashed Firefox 18.0.1 under Mac. I typed

hgjj]{return}{return}{return}{return}

and it just beachballed. I had to force quit the browser. Happened the second time I tried it too.

axelfreeman• 13 years ago

works for me in FF 18.0.1 on win7.

chewmieser• 13 years ago

Chromium 24.0.1302.0 (162733) on OS X 10.8.2: Same issue as above, although I just had to close out the tab instead of forcing the browser to close.

The issue is with the ']', and ONLY after I hit the return key. The entire page becomes unresponsive afterwards.

jakiestfu12• 13 years ago

Fixed!

jakiestfu12• 13 years ago

Thank you for catching this, there are multiple instances where the same bug causes an infinite loop, muahaha. Will fix soon

user242• 13 years ago

sweet. Thanks for fixing.

justplay2• 13 years ago

It is cool but it will more cool if you add highlighting.

Narretz• 13 years ago

Ideally, highlighting should be pluggable into the textarea from another source.

justplay2• 13 years ago

Certainly,but it'll more awesome if it included by default. It will give a more IDE type look .

thousande• 13 years ago

Use CodeMirror (http://codemirror.net/) for this, or Ace

culshaw• 13 years ago

I can't seem to get it to work on Chrome(24) on a Mac :(

bink-lynch4• 13 years ago

Works for me on Mac/Chrome 24.0.1312.56.

thomasfl• 13 years ago

Works great! Seems to have issues with IE 9 though.

DoubleCluster• 13 years ago

Ohh... shiny!

Can we also get Elastic tabstops? http://nickgravgaard.com/elastictabstops/

jakiestfu12• 13 years ago

How would you want the definition to be? How would you "activate" elastic tab stops?

Inversechi• 13 years ago

Awesome - Well done!

swah• 13 years ago

This is my FUD regarding adopting AngularJS: most exciting things in Javascript world happen either in the jQuery world, or on top of bare-bones Javascript.

apathetic• 13 years ago

When you undo, it's undoing it very weirdly.

jamiebicknell• 13 years ago

Good work, like it a lot. I almost feel allowing tabs should be a browser based setting, I'd have it enabled, but I can imagine other people wouldn't never need to use a tab.

I built something similar for keeping indentation/bullets/lists on new lines to assist with Markdown in an ordinary textarea -> http://jamiebicknell.github.com/Markdown-Helper/

ps: long time lurker, first time poster.

jakiestfu12• 13 years ago

The option to disable tabs behavior is there. When to do that is up to you;]

kalms• 13 years ago

This is extremely cool. Thank you!

Sidenote: The name conflicts a bit with http://kennknowles.github.com/behave.js/ - Not sure if that matters to you.

solarbunny• 13 years ago

Try to type in: {}]]] and press Enter...

wheaties• 13 years ago

Ok, looks like you found a bug which sends things into an infinite loop.

jakiestfu12• 13 years ago

Thank you, will fix!

WickyNilliams• 13 years ago

Question: What does this do for accessibility if navigating with a keyboard? How would one genuinely tab out of the field?

Suggestion: Big notice somewhere saying "NO JQUERY DEPENDENCY". Things are so bad these days I assume jQuery dependency until I see something stating otherwise!

bink-lynch4• 13 years ago

This is great! I removed Ace because it was too heavy for my purpose.

Indent Issue:

Type in at least 3 lines, highlight the middle lines using shift+down-arrow, tab(indent), notice the line below the highlighted lines indents too.

jakiestfu12• 13 years ago

I see what you're talking about. Coda and Aptana both do the same thing, and the reason is you're selecting the \n new line character when you do shit+down-arrow. Try shift + down-arrow + left-arrow

bink-lynch4• 13 years ago

True; I am getting my habits from Sublime Text 2 and Eclipse. These don't indent the unhighlighted line below. Guess there are two ways to go :)

Ygg2• 13 years ago

Auto expanding for ', [, { (, " is great, but this should be configurable on a language basis. In other languages it's not uncommon to have things like `http://uri.com` or |Special syntax|

Show HN: Behave.js – Coding Behaviors for textarea elements

Related Stories