simple question: I have input fields with inside-labels! Just like the search-box on this site in the upper right corner. When I start typing the label inside it is hidden.
For accessability reasons I have real tags absolutely positioned behind the actual input field. Therefore I just add a class fill
to the inputfield so the background color is no longer transparent.
inputs.keydown(function (e) {
$(this).addClass(fill);
});
Everything works fine except for a little flaw. Whenever I focus the input field and hit a key like "Shift" "Ctrl" or "CMD" the label disappears. However this is no input yet!
Any idea how to do so?
inputs.keydown(function (e) {
switch (e.keyCode) {
case 13: // Enter
case 16: // Shift
case 17: // Ctrl
case 18: // Alt
case 19: // Pause/Break
case 20: // Caps Lock
case 27: // Escape
case 35: // End
case 36: // Home
case 37: // Left
case 38: // Up
case 39: // Right
case 40: // Down
// Mac CMD Key
case 91: // Safari, Chrome
case 93: // Safari, Chrome
case 224: // Firefox
break;
}
$(this).addClass(fill);
});
These would be all the keycodes where I don't want to blur the label! Just when typing real characters the fill-class should be added. Btw. is there a better syntax to write those switch statements with all the cases?
simple question: I have input fields with inside-labels! Just like the search-box on this site in the upper right corner. When I start typing the label inside it is hidden.
For accessability reasons I have real tags absolutely positioned behind the actual input field. Therefore I just add a class fill
to the inputfield so the background color is no longer transparent.
inputs.keydown(function (e) {
$(this).addClass(fill);
});
Everything works fine except for a little flaw. Whenever I focus the input field and hit a key like "Shift" "Ctrl" or "CMD" the label disappears. However this is no input yet!
Any idea how to do so?
inputs.keydown(function (e) {
switch (e.keyCode) {
case 13: // Enter
case 16: // Shift
case 17: // Ctrl
case 18: // Alt
case 19: // Pause/Break
case 20: // Caps Lock
case 27: // Escape
case 35: // End
case 36: // Home
case 37: // Left
case 38: // Up
case 39: // Right
case 40: // Down
// Mac CMD Key
case 91: // Safari, Chrome
case 93: // Safari, Chrome
case 224: // Firefox
break;
}
$(this).addClass(fill);
});
These would be all the keycodes where I don't want to blur the label! Just when typing real characters the fill-class should be added. Btw. is there a better syntax to write those switch statements with all the cases?
Share Improve this question edited Jan 5, 2012 at 12:55 Felix Kling 817k181 gold badges1.1k silver badges1.2k bronze badges asked Jan 5, 2012 at 12:53 mattmatt 44.4k107 gold badges268 silver badges402 bronze badges 1-
The jQuery event object api.jquery./category/events/event-object has
altKey
,ctrlKey
,metaKey
,shiftKey
properties that you may want to inspect and handle too. – StuperUser Commented Jan 5, 2012 at 12:59
3 Answers
Reset to default 5Use keypress()
instead if you're dealing with character inputs. It already takes care of ignoring most of the keys you want to avoid. It does get triggered at Enter
, but you can easily account for that in the same manner already proposed here.
$("input").keypress(function (e) {
if( e.which == 13 ){ return false; }
$(this).addClass(fill);
}
This would only execute the addClass when no case is hit:
inputs.keydown(function (e) {
switch (e.keyCode) {
case 13: // Enter
case 16: // Shift
case 17: // Ctrl
case 18: // Alt
case 19: // Pause/Break
case 20: // Caps Lock
case 27: // Escape
case 35: // End
case 36: // Home
case 37: // Left
case 38: // Up
case 39: // Right
case 40: // Down
// Mac CMD Key
case 91: // Safari, Chrome
case 93: // Safari, Chrome
case 224: // Firefox
break;
default:
$(this).addClass(fill);
break;
}
});
But since you are using jquery and want a smaller solution try this:
inputs.keydown(function (e) {
if($.inArray(e.keyCode,[13,16,17,18,19,20,27,35,36,37,38,39,40,91,93,224])) return;
$(this).addClass(fill);
});
What you can do is get the text length before and after the key press and see if there is a difference. If there is, it was a real char or a paste event, in which case you need to apply the background color.
i.e. Something like:
var dataLength = 0;
// use keyup instead of keydown to ensure that we catch the event after the data has been entered
inputs.keyup(function (e) {
if($(this).val().length != dataLength) $(this).addClass(fill);
...
dataLength = $(this).val().length;
// re-apply placeholder text if no text
if(dataLength == 0) $(this).removeClass(fill);
}
Still better, use the jQuery textchange event plugin. http://www.zurb./playground/jquery-text-change-custom-event