nuBuilder Forum

Posted: **Tue Feb 26, 2019 8:37 am**

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)

Posted: **Tue Feb 26, 2019 9:12 am**

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>

Posted: **Tue Feb 26, 2019 10:06 am**

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

Posted: **Wed Apr 17, 2019 6:50 am**

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

Posted: **Thu Apr 18, 2019 7:42 am**

Grey, can you verify that the autocomplete attribute is set for the search field?
Use the developer console to inspect elements.

Posted: **Tue Apr 30, 2019 3:22 am**

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

Posted: **Tue Apr 30, 2019 8:23 am**

Is there any other code in your (Setup) Header?
Just insert only the code I posted before:
https://forums.nubuilder.cloud/viewtopic. ... 824#p18788

Posted: **Tue Apr 30, 2019 4:53 pm**

In Chrome additionally I made the setting to OFF for addresses:

chrome://settings/addresses

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

Posted: **Tue Apr 30, 2019 9:44 pm**

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 useful for some fields, but not so much for others (date etc).

Posted: **Tue Apr 30, 2019 10:24 pm**

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');
}

nuBuilder Forum

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

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

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

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

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

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

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

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

Re: Deactivate focus in search field? - autocomplete OFF

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

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