How to remove a style added to Accept/Cancel when revisiting?

Question

How to remove a style added to Accept/Cancel when revisiting?

XiaoxingL opened this issue 12 years ago · 5 comments

Hello Mottie,

For the keyboard with navigation, I can use keyboard to accept/cancel an input. But if I revisit the same input field, the style ('ui-state-hover' I guess) is still there on the accept/cancel button. So there are two buttons with 'ui-state-hover' at the same time.

How can I remove the style on accept/cancel if I am only using a keyboard?(no mouse) I tried to add $(this).find('.ui-keyboard-keyset:visible').find('.ui-state-hover').removeClass('ui-state-hover'); to beforeClose event but it did not work.

Answer 1 · 2012-11-09T11:54:48.000Z

Hi onceternal!

Hmm, I'm not sure why that class would still be applied to the accept key, but the code you shared for the beforeClose callback looks like it should work. I wonder if the keyboard is already hidden by the time the callback is initialized - the script doesn't pause for that callback.

If you could provide me with a demo of this issue, it would help me figure out the issue more easily. All you'd need to do is modify this demo.

Thanks!

Edit: Oh wait, in the callback don't use $(this)... try this code instead:

beforeClose : function(e, kb, el, accepted) {
    kb.$keyboard.find('.ui-keyboard-keyset:visible').find('.ui-state-hover').removeClass('ui-state-hover');
},

Answer 2 · 2012-11-09T22:06:14.000Z

It doesn't seem to work. I am willing to provide you a demo but I am so sorry that I don't know how to modify the demo on Jsfiddle. (I am pretty new)

I modified the Navigate demo on your primary demo site. I am attaching the code here. You may need to run it with the .js files under js folder, or you can modify the script resource to an online host.

I was designing an interface with direction keys and enter key ONLY, so I added

$('.ui-keyboard-input').bind('visible.keyboard', function(){
    $(this)
        .addNavigation({   
        position   : [0,0],
        toggleMode : true, 
        focusClass : 'hasFocus'
    });
})

so that everytime I reveal the input filed, the toggle Mode is on. Without these script, the toggle mode is off when revisiting. I am able to turn it on by pressing Shift F1 but I just want it be on by default. Is there any simple way to turn the navigation mode on?

The removeClass script on beforeClose did not work for me. Instead, I have to

//Manully trigger a keydown event to remove the Class applied to accept/cancel key when revisiting
var press = jQuery.Event("keydown");
press.ctrlKey = false;
press.which = 40;
$(this).trigger(press);

Following is the complete code for the demo. I am sorry for the inconvenience but that's all I know.

Thanks!!!!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<title>Virtual Keyboard Navigation Demo</title>

<!-- demo -->
<link href="demo/demo.css" type="text/css" rel="stylesheet">

<!-- jQuery & jQuery UI + theme (required) -->
<link href="http://code.jquery.com/ui/1.9.0/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.min.js"></script>

<!-- keyboard widget css & script (required) -->
<link rel="stylesheet" href="css/keyboard.css">
<script src="js/jquery.keyboard.js"></script>

<!-- keyboard extensions (optional) -->
<script src="js/jquery.mousewheel.js"></script>
<!-- <script src="js/jquery.keyboard.extension-typing.js"></script> -->
<!-- <script src="js/jquery.keyboard.extension-autocomplete.js"></script> -->
<script src="js/jquery.keyboard.extension-navigation.js"></script>

<style>
.ui-keyboard-button.ui-state-active.ui-state-hover {
    border: 1px solid #fff;
    -moz-box-shadow: 1px 1em 1px #ffba2b inset;
    -webkit-box-shadow: 1px 1em 1px #ffba2b inset;
    box-shadow: 1px 1em 1px #ffba2b inset;
}
.hasFocus { border-color: #59b4d4; }
</style>

<!-- initialize keyboard (required) -->
<script>
$(function(){

    // change default navigation keys
    $.extend($.keyboard.navigationKeys, {
        toggle     : 112, // toggle key; F1 = 112 (event.which value for function 1 key)
        enter      : 13,  // Enter
        pageup     : 33,  // PageUp key
        pagedown   : 34,  // PageDown key
        end        : 35,  // End key
        home       : 88,  // Home key
        left       : 37,  // Left arrow key
        up         : 38,  // Up arrow key
        right      : 39,  // Right arrow key
        down       : 40   // Down arrow key
    });

    $('#keyboard')
        .keyboard({
            alwaysOpen: false,
            usePreview : false,
            position : {
                of : $(window), // null (attach to input/textarea) or a jQuery object (attach elsewhere)
                my : 'center bottom',
                at : 'center bottom',
                at2: 'center bottom' 
            }
        })
        .addNavigation({
            position   : [0,0],     // set start position [row-number, key-index]
            toggleMode : true,     // true = navigate the virtual keyboard, false = navigate in input/textarea
            focusClass : 'hasFocus' // css class added when toggle mode is on
        });

    $('.ui-keyboard-input').bind('beforeClose.keyboard', function(e, kb, el, accepted){
        kb.$keyboard.find('.ui-keyboard-keyset:visible').find('.ui-state-hover').removeClass('.ui-state-hover');
    });

    $('.ui-keyboard-input').bind('hidden.keyboard', function(){
        $("#openkeyboard").focus();
    });

    $('.ui-keyboard-input').bind('visible.keyboard', function(){
        $(this)
            .addNavigation({   
            position   : [0,0],
            toggleMode : true, 
            focusClass : 'hasFocus'
        });
        /*
        //Manully trigger a keydown event to remove the Class applied to accept/cancel key
        var press = jQuery.Event("keydown");
        press.ctrlKey = false;
        press.which = 40;
        $(this).trigger(press);
        */
    });
$("#openkeyboard").focus();
});

</script>

</head>

<body>
    <div id="wrap"> <!-- wrapper only needed to center the input -->

        <!-- keyboard input -->
        <input id="keyboard"></textarea>
        <button id="openkeyboard">input</button>

</div> <!-- End wrapper -->
<script>
$("#openkeyboard").click(function(){
    var kb = $('#keyboard').getkeyboard();
    kb.reveal();
});
</script>
</body>
</html>

Answer 3 · 2012-11-10T14:35:54.000Z

Ok, I think I got it working the way you wanted - see this demo

I might need to add a beforeVisible function to the keyboard to make this a bit easier; but for now add this code:

$('.ui-keyboard-input').bind('visible.keyboard', function(e, kb) {
    kb.$keyboard.find('.ui-state-hover').removeClass('ui-state-hover');
    kb.navigation_options.toggleMode = true;
    kb.navigation_init();
});

Oh, I also ended up removing the beforeClose callback.

Answer 4 · 2012-11-10T23:06:08.000Z

That works! Very simple actually. Thank you, Mottie.

Answer 5 · 2012-12-13T17:34:05.000Z

In version 1.16, the hover class is now removed from all buttons when the keyboard becomes visible. So you shouldn't need any extra scripting anymore :)

I've also added a beforeVisible event.