Javascript: How to simulate cursor with arrow key control for positioning DOM edits?

views:

230

answers:

+1 Q:

Javascript: How to simulate cursor with arrow key control for positioning DOM edits?

I'm building an in-browser IDE using Javascript. The code/widgets are stored in the document. I want control over the editing process so I am intercepting keystrokes and displaying a simulated cursor where the edit point is in the DOM. (At first I tried using contenteditable = true but that isn't giving me enough control.)

I've made some progress so that clicking will insert the cursor at the beginning of the div and the right arrow will move to the next node, although now I am realizing that I am going to have to dig into the contents() and keep track of my cursor position in text nodes..

I'm wondering if anyone knows of any code out there that I can refer to or just copy or something rather than re-inventing the wheel. I am using jQuery but that isn't a requirement.

Perhaps Mozilla Bespin can help. But IMHO if you can't use contenteditable you'll need to write a lot of code.

sw 2010-03-08 01:19:59

thanks. I had started on a canvas-based thing before and considered using bespin at that time. but I am off of canvas for now, I am taking advantage of jquery and the dom etc. that is a whole discussion in itself of course, there are reasons to use canvas. I am hoping I can build on the dom and jquery though.it will probably be a fair amount of code but theoretically worth it. contenteditable won't let me select the whole div/node or whatever and just isn't doing what I want. I am going to do things like intellisense with insertion of chunks of html

Jason Livesay 2010-03-08 01:27:24

ansaurus

tags:

views:

answers:

Javascript: How to simulate cursor with arrow key control for positioning DOM edits?

related questions