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

[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)

[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>

[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

[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

[kev1n]

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

[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

[kev1n]

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

[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.

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

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