Using ENTER and BACKSPACE button

[flowerpower11]

Hello,

First of all many thanks for this fantastic tool!
In meanwhile we're reading other questions and think it is getting us more in correct direction :)
What can be the solution for below to use Enter as next line?

"Within the keyboard we're using for learning typing with "10-fingers" we would like to use the ENTER and the BACKSPACE button. The thing is students have to type what is on the screen, this is a pre-entered text.Once the correct button is used, it goes to next object. Soemthing similar like http://www.ticken.co.uk/free-typing-lessons-5.html
We are now at the point to learn the ENTER. In this case it would be the best solution, the sentence starts at the next line and student has to ENTER.
For BACKSPACE button we would like to show for example [BACKSPACE] between brackets.
When student enters the correct button, system goes to next object."

Hope this is clear and there will be a solution.

Many thanks!

[Mottie]

Hi @flowerpower11!

I'm not sure how you have the keyboard set up, but I think using the validate callback with the exact text you want the user to enter would work. Then change the Enter and Backspace actions to add [ENTER] and [BACKSPACE] instead of their normal actions. You can try something like this (untested!):

$.extend($.keyboard.keyaction, {
    bksp : function(base){
        base.insertText('[BACKSPACE]');
    },
    enter : function(base) {
        base.insertText('[ENTER]');
    }
});

$('#keyboard').keyboard({
    acceptValid: true,
    restrictInput: true,
    validate: function(kb, key, el) {
        var input = "The quick brown fox jumps over the lazy dog.",
            result = kb.$preview.val(),
            len = result.length;
        while ( !input.match( result.substring(0,len) )) {
            len--;
        }
        kb.$preview.val( result.substring(0, len - 1) );
        return true;
    }
});

If that doesn't work, could you share the code on how you are implementing the keyboard?

[flowerpower11]

Hello Mottie,

Thanks for your fast reply here! Unfortunatilly I can't upload the .js + .php file.
Any other wayt to share the code?

Thanks again!

Fp

[flowerpower11]

Ah sorry, I can reply here! PFA the files we're using.

Thanks again!

On Thu, Mar 20, 2014 at 1:38 PM, Rob G notifications@github.com wrote:

Hi @flowerpower11 https://github.com/flowerpower11!

I'm not sure how you have the keyboard set up, but I think using the
validate callback with the exact text you want the user to enter would
work. Then change the Enter and Backspace actions to add [ENTER] and
[BACKSPACE] instead of their normal actions. You can try something like
this (untested!):

$.extend($.keyboard.keyaction, {
bksp : function(base){
base.insertText('[BACKSPACE]');
},
enter : function(base) {
base.insertText('[ENTER]');
}});
$('#keyboard').keyboard({
validate: function(e, key, el) {
var input = "The quick brown fox jumps over the lazy dog."
result = key.$preview.val(),
len = result.length;
while ( !input.match( result.substring(0,len) )) {
len--;
}
key.$preview.val( result.substring(0, len - 1) );
return true;
}});

If that doesn't work, could you share the code on how you are implementing
the keyboard?

Reply to this email directly or view it on GitHubhttps://github.com//issues/261#issuecomment-38161611
.

[Mottie]

Hi, I'm have no idea what you mean by "PFA".

I finally had some time to create a demo. I had to not use match because it converts the string into a regular expression and [ ] have a special meaning (demo).

$.extend($.keyboard.keyaction, {
    bksp : function(base){
        base.insertText('[BACKSPACE]');
    },
    enter : function(base) {
        base.insertText('[ENTER]');
    }
});

$('#keyboard').keyboard({
    acceptValid: true,
    restrictInput: true,
    validate: function(kb) {
        var i, 
            indx = 0,
            input = $('h1').text(), 
            result = kb.$preview.val(),
            len = result.length;
        for (i = 0; i <= len; i++) {
            if (input.substring(0, i) === result.substring(0, i) &&
                // prevent this check from leaving a left bracket
                result.substring(i-1,i) !== '[') {
                indx = i;
            }
        }
        kb.$preview.val( result.substring(0, indx) );
        return input.length === result.length;
    }
});

In this version, I used the change event instead of the validate, so the keyboard can automatically close once everything has been entered (demo).

$.extend($.keyboard.keyaction, {
    bksp : function(base){
        base.insertText('[BACKSPACE]');
    },
    enter : function(base) {
        base.insertText('[ENTER]');
    }
});

$('#keyboard').keyboard({
    acceptValid: true,
    restrictInput: true,
    change: function(e, kb) {
        var i, 
            indx = 0,
            input = $('h1').text(), 
            result = kb.$preview.val(),
            len = result.length;
        for (i = 0; i <= len; i++) {
            if (input.substring(0, i) === result.substring(0, i) &&
                // prevent this check from leaving a left bracket
                result.substring(i-1,i) !== '[') {
                indx = i;
            }
        }
        kb.$preview.val( result.substring(0, indx) );
        // include this if you want to close and accept the entered text
        // after it has all been entered, and is exactly the same
        if (input.length === result.length) {
            kb.accept();
        }
    }
});

Now, there is a BUG in that prevents the backspace from adding the desired text [BACKSPACE]. I'll fix it and push the changes out here in a few minutes.

[flowerpower11]

Thanks for the reply again! I have answered my message before from gMail and attached our files in it. PleaseFindAtcched I meant with PFA

If you would like to see our PHP + .JS files I have sent it as well to your gMail account.

Thanks again.