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?
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, "-"); });
});
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.
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.
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.
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With