html/jquery keep objects selected

Question

I had less than a day to put together a webpage which used a querty keyboard to type into some textboxes. I managed to find a keyboard online and copied it over but it wasnt exactly fit for what i needed so i had to modify it quite a bit to fit within the webpage.

The keyboard was designed to type into a single textbox (in the example case it was a password box) where as i needed it to type into multiple fluidly.

I managed to get a passable solution to this through trial and error but 1 important bug remains and i cant seem to figure it out. Im pretty new to jQuery so i appologis if i dont quite understand a lot of things.

The bug is when i mis-click (or touch as this is on a touchscreen) the textbox becomes unslected and the keys dont work anymore.

The original keyboard post here.

My code Edits:

<script type="text/javascript">
var obj = '';

$('body').click(function(event) {
if (event.target.id != "") {
    obj = $("#" + event.target.id);
}
});


$(document).ready(function(){

var shifton = false;
var hotkeyon = false;
$('#row_hotkey').hide();


// makes the keyboard draggable 
//$("#keyboard").draggable();   



// toggles between the normal and the "SHIFT keys" on the keyboard
function onShift(e) {
    var i;
    if(e==1) {
        for(i=0;i<4;i++) {
            var rowid = "#row" + i;
            $(rowid).hide();
            $(rowid+"_shift").show();
            $('#row_hotkey').hide();
        }
    }
    else if(e==0) {
        for(i=0;i<4;i++) {
            var rowid = "#row" + i;
            $(rowid).show();
            $(rowid+"_shift").hide();
            $('#row_hotkey').hide();
        }
    }
    else if(e==3) {
        for(i=0;i<4;i++) {
            var rowid = "#row" + i;
            $(rowid).hide();
            $(rowid+"_shift").hide();
            $('#spacebar').hide();
            $('#loginform').hide();
            $('#row_hotkey').show();
        }
    }
    else if(e==4) {
        for(i=0;i<4;i++) {
            var rowid = "#row" + i;
            $(rowid).show();
            $('#spacebar').show();
            $('#row_hotkey').hide();
            $('#spacebar').show();
            $('#loginform').show();
        }
    }
}

// function thats called when any of the keys on the keyboard are pressed
$("#keyboard input").bind("click", function(e) {

    if( $(this).val() == 'Backspace' ) {
        $(obj).replaceSelection("", true);
    }

    else if( $(this).val() == "Shift" ) {
        if(shifton == false) {
            onShift(1); 
            shifton = true;
        }

        else {
            onShift(0);
            shifton = false;
        }
    }

    else if( $(this).val() == "hotkeys" ) {
        if(hotkeyon == false) {
            onShift(3); 
            hotkeyon = true;
        }

        else {
            onShift(4);
            hotkeyon = false;
        } 
    }


    else {

        $(obj).replaceSelection($(this).val(), true);

        if(shifton == true) {
            onShift(0);
            shifton = false;
        }
    }



});

});

</script>

I added an additional button to the keyboard which lets me switch between qwerty and hotkey mode.

im looking for a way to keep the textbox selected (obj) even if i accidently hit an additional div (like the keyboard div or the background) or if i dont hit anything at all (which happenes a lot)

As an additional question, on the touch screen the cursor will be disabled, when i tried earlier there was an issue with not being able to press the keyboard buttons, not sure if this is an issue with the way the code works or with a few of the other bugs i worked through but if anyone can let me know if this will still work with hidden cursors and non highlightable objects id appreciate it.

score 0 · Accepted Answer · edited May 23 '17 at 11:58

0

If I understand you correctly, you want to keep focus on an input element. To do that, you can call the .focus() method on the .blur() event. See this post: Maintain focus on an input tag

You will need to do as the other post says, and have the input focus only after a short timer.

$("#noBlur").blur(function() {
  setTimeout(function() {
    $("#noBlur").focus();
  }, 500);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="noBlur" type="text">
<input type="text">

edited May 23 '17 at 11:58

Community

1
1

answered Oct 29 '15 at 00:20

DarkSigma

416
2
9

not sure this would work as it would basically refocus back on a single object, i need to make a list of objects then check which was the last one selected then if the focus becomes something other than those objects refoucs back onto the last one, im pretty sure i can work out an solution based on your answer though, so thanks. – AceScottie Oct 29 '15 at 00:55

html/jquery keep objects selected

1 Answers1