Question: possible to use with codemirror, ace, etc?

[jsbain]

Is it possible to use this keyboard with editors like codemirror or ace? I believe both use hidden textareas for input. I tried, without success... Just loading codemirror seems to kill the keyboard, even if loaded into another textarea... With the ability to use custom keyboards, this would be the ideal coding environment for mobile!

[Mottie]

Hi @jsbain!

Intriguing question! As you stated the editors that I have looked at all use a unique method of cursor & caret placement.

Because this keyboard is tightly bound to caret positioning, it makes it difficult to integrate it with other software; this includes plugins that mask the input and other editors. Also, this keyboard does not currently support contenteditable elements.

I would really need to spend some time digging into the editor code and API to see if integration were possible, but I don't really have the time to do this kind of work.

[jsbain]

Ok, turns out to be very straightforward in codemirror, as it exposes the hidden textarea used for input using getInputField. Set that as the keyboard target, and voila.

Backspace doesn't seem to work except for recently entered text, which seems to be a documented issue with code mirror on android for example.

[jsbain]

working example:

[Mottie]

Oh wow that's awesome! Nice work!

[Mottie]

I figured out how to make the backspace work, but sadly it only works on the same line as you are inputting. If you move the cursor to a different line it stops working (demo):

$.keyboard.keyaction.delete = function(){
    CodeMirror.commands.delLineLeft(CodeMirror);
};

[Mottie]

I haven't forgotten about this request!

I got the caret/cursor keys to work in this demo: http://jsfiddle.net/Mottie/MK947/4021/

But there are still issues with the backspace. So, I'll see if I can get some help: http://discuss.codemirror.net/t/codemirror-virtual-keyboard/440

[knod]

I'm really interested in this as well and I found that it's not that hard with Ace editor. It might help that I skip the whole 'accept' process that just seems to be getting in the way of interacting at the moment. This is a simplification of what I did:

// Elsewhere
var editor = ace.edit("some-id");
...
// Inside the keyboard instantiation I found [on the setup page](https://github.com/Mottie/Keyboard/wiki/Setup#script)
change : function( evnt, keyboard, elem ) {

    // If they're trying to delete
    if ( keyboard.last.key === 'Bksp' ) {
        editor.remove( 'left' );

    // If they're actually trying to type stuff in
    } else {
        // var newInput = however you're getting your values;
        editor.insert( newInput );
    }

}, ...

I hide the keyboard input field with height: 0 in my css and ignore it completely (disabling the preview shows the textarea, which is hard to hide properly). Honestly I'm not sure what the ultimate consequences of my hacks will be, but this works for now. Also, it deletes new lines just fine and works even if the cursor has been moved.

I'm having problems getting the value I need, but that's for another issue (or maybe more research).

[Mottie]

Hi @knod!

Thanks for sharing! That's awesome that you got it to interact more smoothly. Would you be willing to update this demo to get it to work?

Also, instead of using css to hide the input, set the usePreview option to false.

[knod]

Hi @Mottie, I'll check out the demo and play around with it! (Edit: I'll probably make a new fiddle using Ace instead, since that's what I got working)

As for the usePrieview option, if I set it to false the textarea it's attached to reappears and I haven't yet figured out how to then hide it properly – there's always something left over. I should look at your code and see what you do to hide it. Right now, hiding the keyboard's preview field is dead simple and makes everything line up beautifully, but I'd be happy to listen to any input on that. Maybe that should be in its own issue though.

[knod]

@Mottie - here's the demo I've set up with the Ace editor: http://jsfiddle.net/MK947/4104/

Let me know if it's what you're looking for.

[Mottie]

Wow, that's awesome, thanks for sharing!

As for why the usePreview isn't working, I think it's because the plugin uses jQuery .show() so it can be used on hidden inputs (ref). Hmm, maybe I should make that optional...