Space bar not working in form fields

问题:

I am using a template to build a one page portfolio site. The contact form is acting very strange. I cannot enter space in any of the contact fields.

I'm using the following jQuery plugins:

• Gallerific
• PikaChoose
• Fancybox

When you focus in on the message field, it does not allow you to use any spaces. Any ideas on why the spacebar doesn't work?

回答1:

jquery.gallerific.js implements a page-wide keydown handler that captures the spacebar and stops it from functioning.

934 if (this.enableKeyboardNavigation) {
935  $(document).keydown(function(e) {
936   var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
937   switch(key) {
938    case 32: // space
939     gallery.next();
940     e.preventDefault();
941     break;

If you scroll back to the gallery portion of the document while still focusing the form, you will notice that pressing the spacebar progresses to the next image.

回答2:

find the case for 32 and comment out that specific case. That worked for me.

回答3:

I have to disable the enableKeyboardNavigation function to get it working. Now, when a form field is not selected and I press the SPACE key, the webpage is scrolling down. I guess this is normal considering that all websites are scrolling down.

回答4:

This works for me, just adds a space when number 32(space button) is pressed.

$("#input").keyup(function(event){
    if(event.keyCode == 32){
        $("input").val($("input").val()+' ');
    }
);  

回答5:

Why dont you just set enableKeyboardNavigation=false in the settings on the page, how many people you keyboard navigation anyway.

Just another option.

回答6:

I solved this exact problem by changing this.enableKeyboardNavigation in the code Sparr posted above to this.disableKeyboardNavigation.

回答7:

If you turn off Javascript, it works. I can't find any keypress handlers being set, so this might be a conflict between two of the JavaScript components you are using. If nobody comes up with a better idea, try turning off all .js references one by one until it works. Then you at least know who is causing it.

回答8:

I have the gallerific gallery installed on a wordpress page which also has a gravity form on it and the space bar in the gravity form was not working, it was simply not allowing spaces whenever someone was filling in the form.

@tim cooper suggested changing this.enableKeyboardNavigation to this.disableKeyboardNavigation but this disables ALL the navigation on the gallery which would kind of suck if you are used to navigating lots of images with the arrow keys on the keyboard.

So I did something different which worked perfect.

In the if (this.enableKeyboardNavigation) section of the jquery.gallerific.js code I did this.

Changed this part....

case 32: // space
gallery.next();
e.preventDefault();
break;

To this....

case 99999: // space
gallery.next();
e.preventDefault();
break;

(You could also probably just comment it out)

This disables the space bar on gallerific gallery but keeps the arrow functionality on the gallerfic gallery and fixes the issues with form field spaces in the gravity form.

I hope this helps someone.

回答9:

This works for me: If any issue or suggestion contact me on [e-mail]

// Setup Keyboard Navigation

if (this.enableKeyboardNavigation) {
    $(document).keydown(function(e) {

        var target = e.target || e.srcElement; // hack
        //disable navigation on an input editable element
        if (target && target.type) return true;         

        var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
        switch(key) {
            case 32: // space
                    gallery.next();
                    e.preventDefault();
                    break;
            case 33: // Page Up
                gallery.previousPage();
                e.preventDefault();
                break;
            case 34: // Page Down
                gallery.nextPage();
                e.preventDefault();
                break;
            case 35: // End
                gallery.gotoIndex(gallery.data.length-1);
                e.preventDefault();
                break;
            case 36: // Home
                gallery.gotoIndex(0);
                e.preventDefault();
                break;
            case 37: // left arrow
                gallery.previous();
                e.preventDefault();
                break;
            case 39: // right arrow
                gallery.next();
                e.preventDefault();
                break;
        }
    });
}

回答10:

I was looking for a solution forever, finally found one, although my original issue does not involve gallerific.

I also add a class to each object while placing the event to avoid stacking events (I execute this each time a new form is added to the page).

This may have further unintended consequences for your form if you have other events tied to the input, but this works perfectly for my scenario, and I thought it good to have a record of this here:

$('input[type="text"],textarea').not('.allow-spaces').each(function () {
  $(this).on('keydown', function (e) {
    e.stopPropagation();
  });
  $(this).addClass('allow-spaces');
});