Page 1 of 2

How to deactivate focus in search field? .(un)focus()

PostPosted: Tue Feb 26, 2019 5:07 pm
by Janusz
Hi,
When using nuBuilder on Android mobile I have the issue that when entering the browse form then focus is set on the search field and automatically keyboard and peviously entered values of the field are displayed on the screen - (and not much more place is left).
With edit form I am setting the focus on other elenment like buton for example with .focus() and works fine - but for browse form I did not find solution.

Do you know maybe some possibility to automatically unfocus the search field in browse form when opening? (something equilvalent to click on the backgound area)

Re: How to deactivate focus in search field? .(un)focus()

PostPosted: Tue Feb 26, 2019 5:42 pm
by kev1n
Hi,

What I did for is disable autocomplete for the search field. (Add under Setup->Header, new login required afterwards)

Bonus: Transform the search field into a search type to allow the user to quickly clear the field (useful on a mobile device) and modify its style with css.

Code: Select all
function nuOnLoad() {

    if(nuFormType() == 'browse') {
        var s = $("#nuSearchField");
        s.prop("type", "search")
            .attr('autocomplete', 'off')
            .on('search', function () {
                nuSearchAction(1);
            });
    }
}

</script>

<style> 

.nuSearch {
    height: 26px;
    line-height: 26px;
    box-sizing: border-box;
    padding: 0 15px 0 30px;
    border: 1px solid #e3e3e3;
    color: #2c3e50;
    outline: none;
    border-radius: 10px;
    margin-right: 10px;
    transition: border-color 0.2s ease;
    background-size: 20px;
    vertical-align: middle !important;
    background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAANtQTFRF9fX20tXZR1RjeoOOQk9frbO6SlZmvMHG/Pz8lJuktbrAwMXK8fLz8PHy+/z8aHJ/4ePm6uztc32IjJOdxMjNq7G4qa+2VGBu/v7+0tXYoKauhIyXgIiTZnB95ujqv8PJTFhnjpagur/Fa3WBmJ+om6KqRVFhRVJiY216trvBfIWQUFxrdn+L7O7vYGp4aXOAanSB1tncjZWe5Obo7/Dxho+Z3+Hk1djcxsrP1dfba3aC+Pj58vP0Ym16b3mFj5egfYaRwcXLyMzQkJihg4yW+/v76+zuQU5e////xMvS6QAAAKFJREFUeNrMkccOwjAQBZ3eE3qH0HvvvcPL/38RsjjFmHt8GVkjrbSzJPj3SGSMvta0Bc+8n1BFXJY/xt63MxuhgCthjQKLwkSdNeWhS3FoSDnGZOffX2niMuaceFEcT0V2Wg8mRRrSXQ8b0oeRuiVlFVhVwvs4LRkYKH4VGFtMndFMcIJg5wGdms3rRgwR8GLcotsu0OS3jj+m+Uhc+yPAAFhjoSKyVIWTAAAAAElFTkSuQmCC') no-repeat rgb(255, 255, 255);
}

</style>

Re: How to deactivate focus in search field? .(un)focus()

PostPosted: Tue Feb 26, 2019 6:36 pm
by Janusz
Hi Kev1n,
Thanks a lot.
With that code autocomplete is deactivated :-)
The focus in the search field stays and keyboards opens - but without autocomplete - it's OK now.

Janusz

Re: How to deactivate focus in search field? .(un)focus()

PostPosted: Wed Apr 17, 2019 2:20 pm
by greguu
Hi,

I did try the obove mentioned and it does change the appearance of the searchf field, but the autocomplete is still enabled for the search filed in Chrome. Can you please advise on how to disable the autocomplete for the search field (or any other field like date fields etc) ?

Many Thanks,

Greg

Re: How to deactivate focus in search field? .(un)focus()

PostPosted: Thu Apr 18, 2019 3:12 pm
by kev1n
Grey, can you verify that the autocomplete attribute is set for the search field?
Use the developer console to inspect elements.

Re: How to deactivate focus in search field? .(un)focus()

PostPosted: Tue Apr 30, 2019 10:52 am
by greguu
Hi kev1n,

I can confirm the autocomplete attribute is not set when inspecting the element in Chrome while using the code you pasted above in the Setup / Header section. The style is applied fine. Is there another way to set this attribute for any field (not only search) ?

Cheers,
Greg

Re: How to deactivate focus in search field? .(un)focus()

PostPosted: Tue Apr 30, 2019 3:53 pm
by kev1n
Is there any other code in your (Setup) Header?
Just insert only the code I posted before:
viewtopic.php?f=19&t=9824#p18788

Re: Deactivate focus in search field? - autocomplete OFF

PostPosted: Wed May 01, 2019 12:23 am
by Janusz
In Chrome additionally I made the setting to OFF for addresses:

chrome://settings/addresses

and have no autocomplete in nuBuilder for dates, searches, etc.

Re: How to deactivate focus in search field? .(un)focus()

PostPosted: Wed May 01, 2019 5:14 am
by greguu
kev1n: I did remove the header test code that was present as a default and just added the code from your link, but still the autocomplete attribute is not set. Maybe something has changed ? or Chrome does ignore it.

Janusz: This works and may be a feasible workaround until there is a way to specificly disable the autocomplete for certain fields. Its quite usefull for some fields, but not so much for others (date etc).

Re: How to deactivate focus in search field? .(un)focus()

PostPosted: Wed May 01, 2019 5:54 am
by greguu
While I had no luck with the search field so far, I managed to get other fields to disable the autocomplete by using the same jQuery method in nuOnLoad() function within the form itself.

Code: Select all
function nuOnLoad() {
     var s = $("#date_field");
     s.attr('autocomplete', 'off');
}


For a subform field this seems to do the trick.

Code: Select all
function set_autocomplete_off(subform, field) {
     var sf = nuSubformObject(subform);
     for(var r = 0; r < sf.rows.length; r++) {
          $('#' + subform + nuPad3(r) + field).attr('autocomplete', 'off');
     }
}

function nuOnLoad() {
     set_autocomplete_off('my_subform', 'my_date_field');
}