Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Does Not work in mobile devices. #414

Closed
uc-rsh opened this issue Jul 23, 2018 · 26 comments
Closed

Does Not work in mobile devices. #414

uc-rsh opened this issue Jul 23, 2018 · 26 comments

Comments

@uc-rsh
Copy link

uc-rsh commented Jul 23, 2018

Unable to write any command in mobile device

@jcubic
Copy link
Owner

jcubic commented Jul 23, 2018

in what mobile devices? I can only test on android and it works https://terminal.jcubic.pl/android.html

@jcubic
Copy link
Owner

jcubic commented Jul 28, 2018

By default when you open website that use jQuery Terminal on mobile device, it will not enable it, because to open virtual keyboard you need user action, so you need to tap on the terminal to enable it and start typing.

@jcubic
Copy link
Owner

jcubic commented Sep 13, 2018

Closing because of inactivity.

@jcubic jcubic closed this as completed Sep 13, 2018
@uc-rsh
Copy link
Author

uc-rsh commented Sep 14, 2018

Closing because of inactivity.

yes, it is resolved

@jcubic
Copy link
Owner

jcubic commented Oct 14, 2018

It seems that there are issues on mobile, found issue on iPhone and I tested on Android and there are different issues. iPhone is adressed in #443

@jcubic jcubic reopened this Oct 14, 2018
jcubic added a commit that referenced this issue Oct 14, 2018
@jcubic
Copy link
Owner

jcubic commented Oct 14, 2018

The problem was when terminal was added to body.

@jcubic jcubic closed this as completed Oct 22, 2018
@shortstack
Copy link

this is still an issue on mobile, with at least android (haven't tried on ios). any plans to fix, or leave as is?

@jcubic
Copy link
Owner

jcubic commented Jul 24, 2019

@shortstack can you explain what you're doing what you expect and what you've got instead?

@ANTOSzbk
Copy link

ANTOSzbk commented Jan 5, 2020

@jcubic i think the issue is any input from mobile device is not read properly - not at all actually - besides keyEvents which are hard coded. You can check this issue through my website which is using your plugin hidden link - while everything is working on every PC browser, there is that issue on Android (haven't tested on iOS).

@jcubic
Copy link
Owner

jcubic commented Jan 5, 2020

@ANTOSzbk the problem you have is that you probably have always focus, you can't blur and on mobile you need user action to trigger the keyboard, so your terminal need to be disabled on init, you click on the page keyboard will popup and the terminal will be enabled and ready to use. I should document this somewhere. Check this https://terminal.jcubic.pl/android.html that is my testing page for mobile.

@jcubic
Copy link
Owner

jcubic commented Jan 5, 2020

PS: can I add your site to in the Wild on the website? not sure what "hidden link" mean.

@jcubic
Copy link
Owner

jcubic commented Jan 5, 2020

One more thing if you use latest version tabcompletion was removed long ago, the option is now completion that can be true, array of function.

@jcubic
Copy link
Owner

jcubic commented Jan 5, 2020

And just one more thing that you can do to improve your terminal. Check how I use exec on link to run Wikipedia articles on click in 404 error page. (run "wikipedia Linux" and click on any white underline text).

You can do the same for command list:

this is working when running in console.

$(document).on('click', '.exec', function() {
   $.terminal.active().exec($(this).text());
})
$.terminal.active().echo('[[u;;;exec]info]');

you may also want to change the cursor to pointer.

.exec {
    cursor: pointer;
}

@jcubic
Copy link
Owner

jcubic commented Jan 5, 2020

It seems that I did same mistake in 404 page, it was not working on mobile. that onBlur: function() { return false; } was very old it should not be used right now, with full screen terminal you should use css to make terminal whole height (I use height: 100vh for this, but it need to be tested if it work correctly)

@ANTOSzbk
Copy link

ANTOSzbk commented Jan 5, 2020

Hidden link means I don't want promote myself through your projects with my domains on your's issues page. You can use it wherever you want, credits are given even in one of terminal commands. Thanks for the interest on the issue and additional help, I will check your solution and give feedback

@ANTOSzbk
Copy link

ANTOSzbk commented Jan 5, 2020

@jcubic Everything works as intended right now. onBlur: () => { return false; } does not let mobile devices ever focus on textarea. My website is is early stages of development, i am planning on adding many functionalities with your terminal plugin. Anyway thanks for the interest

@VexFX
Copy link

VexFX commented Jan 27, 2023

I'm currently having mobile issues where clicking anywhere on the page results in the terminal losing focus, and the only way to get it back is to click a 1-pixel high edge at the bottom of the terminal. Been trying to fix it for about 3 hours and figured it was time to reach out.

On a side note, I had to add the following CSS to prevent an odd blue border from appearing around part of the terminal on the iPhone. Saw that border on many of the demo examples too:
div {
outline: none;
}

Also having issues with it scrolling back to the top on iPhone when entering a new command.

@jcubic
Copy link
Owner

jcubic commented Jan 27, 2023

@VexFX Something is wrong with your code. Because the library works on mobile, See this demo https://jcubic.github.io/jquery.terminal/

Tested on BrowserStack and your website doesn't work on Android.

There are some issues with mobile but this is something new. Please create another issue. Note that it may take a while before I will have time to debug your code.

@jcubic
Copy link
Owner

jcubic commented Jan 27, 2023

Ok found the error, please don't use this code if you want the library to work on mobile:

    onBlur: function() {
        return false;
    }

This was written multiple times, this is old code that was created long ago before testing on mobile.

YOU SHOULD NOT USE THIS CODE

@jcubic
Copy link
Owner

jcubic commented Jan 27, 2023

If you want to handle mobile you need to return false only on desktop, because on mobile the keyboard needs to be disabled on init. Otherwise, you will not be able to focus on the terminal.

Maybe I should make a fix that will allow this to work, but I'm not sure if it's possible.

@VexFX
Copy link

VexFX commented Jan 28, 2023

The core of the code I'm using was copied from one of the examples. Removing the onBlur code helped a lot.

It still scrolls to the top when typing, so you can't see what you type, and the bottom of the console ends up blocked by the keyboard all the time. The keyboard issue is more just a limitation of iOS though.

@jcubic
Copy link
Owner

jcubic commented Jan 28, 2023

The issue with scrolling on iOS is tracked in #707 it's hard to fix, because iOS sucks, same as IE. Because browsers in iOS are just wrappers over native Safari and Safari has a lot of issues.

@VexFX
Copy link

VexFX commented Jan 28, 2023

Yeah, iOS/safari is a headache.. they want to do their own thing rather than support standards. Stupid stuff like not being able to set the volume on HTML5 audio, which is supported everywhere else. Appreciate all the hard work you've put into this resource, it's been a lot of fun.

@gangeli
Copy link

gangeli commented Jan 30, 2023

I too am experiencing issues with this. At least, on my Android (Pixel 6) on both Firefox and Chrome.

For my own site (https://gabor.dev), the keyboard hides immediately after clicking on the terminal. For the demo site (https://terminal.jcubic.pl/android.html), the terminal hides (i.e., scrolls out of view) when the keyboard opens.

The abbreviated code snippet I'm using to initialize the terminal is below; the full code is in the source of https://gabor.dev:

$('body').terminal({
    echo: function (...args){ this.echo(args.join(' ')) } ,
    // ...
}, {
    greetings: greetings.innerHTML,
    prompt() {
        // ...
        return `(${color('green', 'guest@gabor.dev')})-[${color('blue', dir)}]$ `;
    },
    checkArity: false,
    completion: function(arg, callback) {
        if (this.get_command().match(/^(cat|open) /)) {
             callback(find(true, false, resolve_inode(wd), ''));
        } else if (this.get_command().match(/^(ls) /)) {
             callback(find(false, true, resolve_inode(wd), ''));
        } else {
             callback(['ls', 'cd', 'open']);
        }
    },
});

Any help is appreciated!

@jcubic
Copy link
Owner

jcubic commented Jan 30, 2023

@gangeli it looks like you don't have a mobile viewport tag that's why the terminal is so small and the page zooms in when you try to focus.

@jcubic
Copy link
Owner

jcubic commented Jan 30, 2023

Please check this page https://jcubic.github.io/jquery.terminal/ this demo is without any extra code. android.html is only for experimentation when I debug something and it may not be up to date.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants