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

Questions related to using nuBuilder Forte.

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

Postby Janusz » Tue Feb 26, 2019 5:07 pm

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)
Janusz
 
Posts: 229
Joined: Fri Dec 28, 2018 10:11 pm
Location: Krakow, Poland

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

Postby kev1n » Tue Feb 26, 2019 5:42 pm

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>
kev1n
 
Posts: 266
Joined: Mon Oct 15, 2018 2:13 am

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

Postby Janusz » Tue Feb 26, 2019 6:36 pm

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
Janusz
 
Posts: 229
Joined: Fri Dec 28, 2018 10:11 pm
Location: Krakow, Poland

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

Postby greguu » Wed Apr 17, 2019 2:20 pm

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
greguu
 
Posts: 6
Joined: Wed Aug 26, 2015 1:16 pm

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

Postby kev1n » Thu Apr 18, 2019 3:12 pm

Grey, can you verify that the autocomplete attribute is set for the search field?
Use the developer console to inspect elements.
Attachments
autocomplete.png
autocomplete.png (8.31 KiB) Viewed 502 times
kev1n
 
Posts: 266
Joined: Mon Oct 15, 2018 2:13 am

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

Postby greguu » Tue Apr 30, 2019 10:52 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
greguu
 
Posts: 6
Joined: Wed Aug 26, 2015 1:16 pm

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

Postby kev1n » Tue Apr 30, 2019 3:53 pm

Is there any other code in your (Setup) Header?
Just insert only the code I posted before:
viewtopic.php?f=19&t=9824#p18788
kev1n
 
Posts: 266
Joined: Mon Oct 15, 2018 2:13 am

Re: Deactivate focus in search field? - autocomplete OFF

Postby Janusz » Wed May 01, 2019 12:23 am

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

chrome://settings/addresses

and have no autocomplete in nuBuilder for dates, searches, etc.
Janusz
 
Posts: 229
Joined: Fri Dec 28, 2018 10:11 pm
Location: Krakow, Poland

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

Postby greguu » Wed May 01, 2019 5:14 am

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).
greguu
 
Posts: 6
Joined: Wed Aug 26, 2015 1:16 pm

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

Postby greguu » Wed May 01, 2019 5:54 am

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');
}
greguu
 
Posts: 6
Joined: Wed Aug 26, 2015 1:16 pm

Next

Return to General