spacing in search box

Question

$(document).ready(function()
{
   $('#searchInput').keypress(function() 
   {
      if($(this).val() == '')
      {
        $('#button').attr('disabled', true);
      }
      else
      {
        $('#button').removeAttr('disabled');
      }

   });
});

and i added next to button id "disabled" now i have a problem.When I press space and click search button, no problem, Everything is fine.But after I pressed space key and pressed backspace , i am clicking search button and it shows results.I couldn't resolve the problem.I want to prevention space initial.

Your question is mixed up. In the comments below you are asking for something that it is not described in your initial question. Please, provide a proper description of what you are trying to achieve and why you failed to achieve it — Alexander, Feb 10 '13 at 13:33
dear alexander i don't want to space in my search box.I want to prevention blank results.UP CODES WORKED BUT WİTH MOUSE-CLICK.it doesn't work with keyboard-enter — user1880910, Feb 10 '13 at 13:44

score 1 · Answer 1 · answered Feb 10 '13 at 13:12

1

Space is not null you should try $.trim() function , trim will remove all the spaces and give only string without any trailing spaces

 $('#searchInput').keypress(function() 
 {
   if ($.trim($(this).val()) == '')
   {
     $('#button').attr('disabled', true);
   }
   else
   {
     $('#button').removeAttr('disabled');
   }
 });

answered Feb 10 '13 at 13:12

Maddy

791
1
8
22

it worked, but when i keyboard press enter, it shows results again – user1880910 Feb 10 '13 at 13:16
instead of keypress event add keyup event – Maddy Feb 10 '13 at 13:18
This is completely irrelevant to the problem, even if it is a good idea. – lonesomeday Feb 10 '13 at 13:18
i added instead of keypress keyup.But when i pressed enter it shows results again – user1880910 Feb 10 '13 at 13:25
i am sorry it works with mouse-click but it doesn't work with keyboard – user1880910 Feb 10 '13 at 13:37
i guess we should keyboard disabled too. – user1880910 Feb 10 '13 at 13:38

lonesomeday · Answer 2 · 2013-02-10T13:34:23.597

0

Bizarrely, you are running up against some odd browser behaviour. In IE and Webkit browsers, backspace does not fire a keypress event, so the handler is never executed.

In Firefox, however, the function is run before the value of the element is changed. So when you type space, the function is run and value is still empty. Therefore the button is disabled. Then you press backspace, and the function is run with value is still a one-character string, with a space in it. So the button is enabled.

You need to use keyup instead, as this is run in all browsers when backspace is pressed and it is run after the value is changed.

$(document).ready(function () {
    $('#searchInput').keyup(function () {
        if (this.value == '') {
            $('#button').prop('disabled', true);
        } else {
            $('#button').prop('disabled', false);
        }
    }).keyup(); 
});

Working example

Changes I have made:

changing keypress to keyup
this.value rather than $(this).val(): much faster
prop('disabled', true) rather than attr('disabled', true): this is the correct function to use and avoids doing the odd removeAttr
adding keyup() to the end, so the function is also run when the page is first loaded

edited Feb 10 '13 at 13:34

answered Feb 10 '13 at 13:15

lonesomeday

233,373
50
316
318

I beg to disagree about the behavior you describe for `keypress`. In short, there's no event whatsoever when you press backspace – Alexander Feb 10 '13 at 13:20
i don't want to space initial – user1880910 Feb 10 '13 at 13:20
@Alexander Do you really. Why? – lonesomeday Feb 10 '13 at 13:23
As I said above, there shouldn't be an event when you press backspace – Alexander Feb 10 '13 at 13:25
@Alexander In all fairness, I think the problem is that I'm using Firefox and you are using a different browser. FF fires `keypress` on backspace, other browsers do not. This is news to me! – lonesomeday Feb 10 '13 at 13:31
Fair enough, I'm off here. The OP is changing the question on topic and this will take forever – Alexander Feb 10 '13 at 13:39

yckart · Answer 3 · 2013-02-19T01:47:27.040

0

Just a bit minified and use $.trim to prevent enabling by whitespace:

$('#searchInput').keyup(function () {
       $('#button').prop('disabled', !$.trim(this.value));
}).keyup();

Demo

edited Feb 19 '13 at 01:47

answered Feb 19 '13 at 01:40

yckart

32,460
9
122
129

spacing in search box

3 Answers3