JavaScript / HTML Command Line Widget [closed]

Question

I'm making a text based game in JavaScript, and I'm looking for a command line widget, with the following features:

• print - Be able to send a synchronous command to put some text (preferably support arbitrary HTML) into the command line.
• commands - Be able to specify commands which a user can type in, which will then execute functions (should support parameters to such commands, and preferably also have an auto-complete).
• prompt - Be able to request input (and send that input to a callback). This should queue prints, and disable commands.
• The user shouldn't be able to edit output text (but should be able to copy and paste).
• Preferably using semantic elements.
• Browser Support: Latest Firefox & Chrome, preferably also IE9, latest Safari & Opera.

Does anyone know about any such preexisting widget, if not, can anyone give me tips for how to make one?

Answer 1

It's not as tricky as you'd think to make this. I made one recently for a project, using HTML elements and jQuery JS.

I used an input element for the input line - handling special keypresses like enter and tab. For previous commands and responses I used a scrollable area which I appended new elements to as new inputs or responses were available.

I displayed the commands and responses in DIVs, which allowed for copy and pasting (and HTML formatting). I even made the responses disclosable so I'd only show the command initially and you could click on the 'expand' button to show the rest of it.

It all worked really well in the end. Just a few simple HTML elements and some jQuery code which wasn't as complex as I thought it would be when starting it. By far the most complexity and most code was in tweaking the aesthetics!