locked
Focus event on smartphone RRS feed

  • Question

  • User1510859543 posted

    I have the js code below that I am using on our asp.net website. The focus() event works great on any browser on my PC but does not work when using Chrome browser on my smartphone. Is there another way to set focus event so it works on any device?

                var vtxt = document.getElementById('txtName');
                if (vtxt.value.length === 0) {
                    alert('Name is empty. Process stopped.');
                    vtxt.focus();
                    return false;
                }
    

    Monday, March 15, 2021 5:03 PM

Answers

  • User-474980206 posted

    With current versions it works. which mobile chrome are you using?


    Note: On mobile the focus() does not display keyboard.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 15, 2021 11:00 PM

All replies

  • User-474980206 posted

    With current versions it works. which mobile chrome are you using?


    Note: On mobile the focus() does not display keyboard.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 15, 2021 11:00 PM
  • User1510859543 posted

    Chrome 69

    Tuesday, March 16, 2021 11:33 AM
  • User753101303 posted

    Hi,

    Most of us likely don't have this version and it seems toi work for Bruce. Do you see the alert? You could also perhaps catch a  possiblle exception or trace what happens in a textarea to first undestand what happens exactly on ypur mobile phone.

    I never start by reading code to guess what happens. I'm always starting by taking a couple oif minutes to see first what happens and to then look at the code knowing what I'm looking foir.

    Tuesday, March 30, 2021 2:32 PM
  • User-1361507163 posted

    I have the js code below that I am using on our asp.net website. The focus() event works great on any browser on my PC but does not work when using Chrome browser on my smartphone. Is there another way to set focus event so it works on any device?

                var vtxt = document.getElementById('txtName');
                if (vtxt.value.length === 0) {
                    alert('Name is empty. Process stopped.');
                    vtxt.focus();
                    return false;
                }

    Depend on the mobile version you're using, it usually work on latest version 

    Wednesday, April 7, 2021 12:19 PM
  • User1510859543 posted

    I am using mobile version 69 and it is not working on either my android phone or my android tablet, both with Chrome version 69.

    Wednesday, April 7, 2021 3:31 PM
  • User1510859543 posted

    Sorry. The version is 89

    Wednesday, April 7, 2021 8:07 PM
  • User-474980206 posted

    don't have an android device, but it works in both safari and chrome on an iPhone.

    maybe you need to upgrade your android o/s. I know android has had issues with this feature.

    Wednesday, April 7, 2021 9:55 PM
  • User1510859543 posted

    It's a brand new Galaxy 21S.

    Wednesday, April 7, 2021 10:13 PM
  • User753101303 posted

    Hi,

    And you have to keep using Chrome 69 which seems to be from 2018 (the current version is 89).

    As it works for others and most if not all of us don't have this version you'll likely have to test your code yourself. For example I would use something such as https://stackoverflow.com/questions/6604192/showing-console-errors-and-alerts-in-a-div-inside-the-page to show a trace for each step in a visible control. You could also start by checkign each step one by one until you find it "doesn't work" (not sure which behavior you see, do you even see the alert?)

    You also have https://developer.mozilla.org/fr/docs/Web/API/GlobalEventHandlers/onerror

    Not sure in which event you are doing this but for now my firest guess might be some kind of interaction between showing an alert and handlling the current event ???

    I often prefer to spend few mintues to really see what happens rarher than to keep reading the code and wondeeing again and again what actually happens.

    Thursday, April 8, 2021 7:31 AM
  • User1510859543 posted

    I did correct my previous post. It is version 89.

    Thursday, April 8, 2021 11:33 AM
  • User753101303 posted

    It should work. Telling what happens can help. For example do you see the alert message or not even ? 'ie are you 100% sure the problem is just with the focius() call ? You are doing that from which event?

    I would try without the alert message in case it would trigger other events. (though I'm not sure why it works with the desktop browser?)
    https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus works fine for me on with Android and Chrome 89 (scrolls into view if the control is behind the address bar, shows also the keyboard)

    If not seeing anything by reading the code past few minutes, I then actively debug my code. For example here I would use https://stackoverflow.com/questions/6604192/showing-console-errors-and-alerts-in-a-div-inside-the-page to show debug messages inside my mobile page to better understand what happens.

    Sometimes I'm even testing the feature on a dedicated page. usally you can spot quite quickly whart happens especially when the other option is just to read the code again and again without seeing anything obvious.

    I'll perhaps give it a try later if you still can't see (please do tell us from which event you are calling this).

    Thursday, April 8, 2021 12:46 PM
  • User1510859543 posted

    Yes, I see the alert message on all devices. The code is run from a function when the user clicks a file upload button which I want to bypass when the textbox is empty.

    On the desktop after clicking OK on the alert I see the cursor blinking in the textbox. On my smartphone and my tablet I do not get a blinking cursor so I just start typing but I have no idea where the focus is because nothing shows in any of the 4 textboxes on the page. However, the page scrolls up to the location of the textbox. 

    I have tried putting the focus event before and after the alert but both do the same. Maybe it is a css issue?  I can try to remove the css from the textbox and see if that works.  I will also check out the links you sent to see if there is another way.

    Thursday, April 8, 2021 1:12 PM
  • User753101303 posted

    Yes for now it seems to work as expected and that you just have a CSS issue.

    I do see a blinking cursor in thr MDN page for the focus method I posted ealier. You can also use https://developer.mozilla.org/en-US/docs/Web/CSS/:focus  which also works here with Android and Chrome.

    As you see it is much easier to understand what happens by starting from the actual behavior rather than by starting from the code and wondering which bad thing could happen.

    Thursday, April 8, 2021 1:24 PM