Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use jQuery to prevent the space key from entering a space?

I thought it would be a simple thing to hijack the space key when in a form input so that it would function like a hyphen. Generally jQuery makes stuff like this really simple.

The code I tried is this:

        $("#StreamUrl").keydown(function (e) {
            if (e.keyCode == 32) return 109;
        });

But this has no effect whatsoever. I tried a more simple script:

        $("#StreamUrl").keydown(function (e) {
            //if (e.keyCode == 32) return 109;
            alert(e.keyCode);
        });

This script correctly alerts 32 on space press and 109 on hyphen press. Also, I have no JavaScript errors.

Why wouldn't if (e.keyCode == 32) return 109; work? When I replace that line with if (e.keyCode == 32) alert("space!!"); I get the alert correctly, so I know the if is returning true correctly.

What gives?

Edit - Solution

Thanks to @Nick for pointing out the copy-paste issue. I ended up with a little bit of a hybrid. Here's the code that I have gotten to work which is both smooth and handles Copy/Paste.

        $("#StreamUrl").keydown(function (e) {
            if (e.keyCode == 32) {
                $(this).val($(this).val() + "-"); // append '-' to input
                return false; // return false to prevent space from being added
            }
        }).change(function (e) {
            $(this).val(function (i, v) { return v.replace(/ /g, "-"); }); 
        });
like image 1000
quakkels Avatar asked Oct 04 '10 21:10

quakkels


People also ask

How to avoid space in TextBox using jQuery?

jQuery Code Inside the document. ready event handler, the Remove Button has been assigned with a Click event handler. When the Remove Button is clicked, first the TextBox is referenced and then the whitespace is removed from beginning (start) and end of the string using the jQuery trim function.

How can you prevent someone from entering space at the beginning of a TextBox?

Handle the KeyPress event for this textBox and put a single condition like. Here textBox1 is your textbox. This code will prevent user to enter space at begining of TextBox.

How do you restrict space in a TextBox in HTML?

you can use the onkeypress event of the input tag to react to keypresses. While appending text at the end it would be easy: just cancel the keypress event in case there is already a space at the end of the text field, but since you may also be editing inside an existing text string you better use the onkeyup event.


2 Answers

The problem is that return 109 doesn't do what you want it to do. In an event handler, you return true or false depending on whether or not you want the browser to execute the default action. In keydown, you would return false to prevent the character from being inserted.

$("#StreamUrl").keydown(function (e) {
     if (e.keyCode == 32) { 
       $(this).val($(this).val() + "-"); // append '-' to input
       return false; // return false to prevent space from being added
     }
});

jsfiddle example

like image 176
Cristian Sanchez Avatar answered Oct 23 '22 10:10

Cristian Sanchez


You usually want the keyup event instead here, which fires after the space has been added, something like this is a bit easier:

$("#StreamUrl").bind("keyup change", function () {
  $(this).val(function(i, v) { return v.replace(/ /g,"-"); });
});

Try it out here, what this does is allow the space to be added, but then instantly does a replace of spaces for hyphens by passing a function to .val(). For older versions of jQuery, it'd look like this:

$("#StreamUrl").bind("keyup change", function () {
  $(this).val($(this).val().replace(/ /g,"-"));
});

This works even for people pasting content, an easy way to get around keydown validation.

like image 45
Nick Craver Avatar answered Oct 23 '22 09:10

Nick Craver