CODEWITHSUNDEEP
javascripthtmlcssscrollbarcss-position
Joel
Joel

Reputation: 937

Pressing the space bar in a text input is causing the parent element to scroll instead of inputting the value

I currently have an issue where a space bar keydown is not being inputted to the text input, but causing the parent element to scroll (when the page height is small enough that scrolling is required). I've noticed that the value is properly inputted when my mouse is away from the parent element or the page height is large enough that scrolling isn't required.

I'm using perfect-scrollbar.js for the styling/functionality of the scrolling and the parent container has a fixed position.

Any help is much appreciated :)

jsfiddle

<div id="sidebar">
    <div id="sidebar-container">
        <div class="smallbox"></div>
        <input type="text" placeholder="Press a letter and then Spacebar" style="width:270px;">
        <div class="largebox"></div>
    </div>
</div>

Upvotes: 0

Views: 1978

Answers (1)

alexP
alexP

Reputation: 3765

The perfectScrollbar function seems to add an event handler to some key events. You have to use e.stopPropagation to prevent the execution of other event handlers.

Here is the DEMO Try the demo with and without e.stopPropagation() and you'll see the difference.

function keydownHandler(e) {

    //NEW
    var evt = e ? e : window.event;
    if (evt.stopPropagation)    evt.stopPropagation();
    if (evt.cancelBubble!=null) evt.cancelBubble = true;
    //END

    switch(String.fromCharCode(e.which)) {
    case menu.visible.key:
        if (menu.visible.enable==true && e.shiftKey && e.ctrlKey) 
            sendRequest({action:'visible'});
        break;
    case menu.selected.key:
        if (menu.selected.enable==true && e.shiftKey && e.ctrlKey) 
            sendRequest({action:'selected'});
        break;
    case menu.entire.key:
        if (menu.entire.enable==true && e.shiftKey && e.ctrlKey) 
            sendRequest({action:'entire'});
        break;
    }
}

Upvotes: 2

Related Questions