jquery attr() not working on mobile - Android - Chrome

Question

I'm trying to make an input be enabled/dsabled if an input type text is either empty or not. Here is my jQuery code:

$(document).on('keyup', '#searchString', function(){
    searchString = $('#searchString');
   if(searchString.val().length > 0){
        $('#cmdSearch').attr('disabled', false);
    }
    else{
        $('#cmdSearch').attr('disabled', true);
    }
});

And here is the relevant HTML node:

<div class="form-wrapper">
     <form method="post" class="res-form" role="form">
     <input type="text" name="searchString" id="searchString" autocomplete="off" aria-autocomplete="none" class="form-control input-lg" placeholder="busca artículos, screencasts o demos">
     <div style="height: 15px;"></div>
     <button type="submit" name="cmdSearch" disabled="true" id="cmdSearch" class="btn btn-block btn-lg btn-success">Buscar</button>
     </form>
</div>

It works on desktop, though it doesn't on mobile. Any ideas why?

EDIT

I found something interesting, it does work, the problem is, that once I wipe out all the text from the input, let's say the input has a .val() of "foo" and I delete the "foo", I still have to press backspace once more so that the script takes action, this is happening on Android, on Chrome. This seems weird, any fix for this?

score 1 · Answer 1 · answered Dec 31 '13 at 09:54

1

For boolean you better use prop() instead of attr()

$(document).on('keyup', '#searchString', function(){
    searchString = $('#searchString');
   if(searchString.val().length > 0){
        $('#cmdSearch').prop('disabled', false);
    }
    else{
        $('#cmdSearch').prop('disabled', true);
    }
});

answered Dec 31 '13 at 09:54

Adil

146,340
25
209
204

edited my post, changed it to what you said, still has the same problem – CodeTrooper Dec 31 '13 at 09:59
Doesn't work on mobile, does on desktop, not on mobile. – CodeTrooper Dec 31 '13 at 10:05
Try using trim $.trim(searchString.val()).length > 0){ – Adil Dec 31 '13 at 10:06
Also try using keypress instead of keyup – Adil Dec 31 '13 at 10:07
Did you use both trim and keypress? – Adil Dec 31 '13 at 10:14
Yes, used both of them. Doesn't work. Still have to press backspace on my android keyboard once more so that the input goes disabled. – CodeTrooper Dec 31 '13 at 10:15
What length you get after press backspace on last character? – Adil Dec 31 '13 at 10:17
I don't think I can get a console.log out of my mobile phone, can I? – CodeTrooper Dec 31 '13 at 10:19
You can use alert() instead I guess – Adil Dec 31 '13 at 10:21
true, didn't think of that one. – CodeTrooper Dec 31 '13 at 10:22
Ok this is VERY weird. Everytime I press a key on the keyboard, it gives me the number of characters it has right, but everytime I press backspace, it doesn't alert anything, and once the input is empty, and I press backspace once more, then it alerts 0, I have no idea why it behaves like that. :/ – CodeTrooper Dec 31 '13 at 10:24

score 0 · Answer 2 · answered Dec 31 '13 at 10:05

As you mentioned your new updates, i think you have to use $.trim() method to remove any whitespace from that element in the if condition:

$(document).on('keyup', '#searchString', function(){
    var searchString = $.trim($(this).val()); //<------make a local var instead
    if(searchString > 0){
        $('#cmdSearch').prop('disabled', false);
    } else {
        $('#cmdSearch').prop('disabled', true);
    }
});

jquery attr() not working on mobile - Android - Chrome

2 Answers2

Linked