-
-
Notifications
You must be signed in to change notification settings - Fork 576
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
Comments
in what mobile devices? I can only test on android and it works https://terminal.jcubic.pl/android.html |
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. |
Closing because of inactivity. |
yes, it is resolved |
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 |
The problem was when terminal was added to body. |
this is still an issue on mobile, with at least android (haven't tried on ios). any plans to fix, or leave as is? |
@shortstack can you explain what you're doing what you expect and what you've got instead? |
@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). |
@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. |
PS: can I add your site to in the Wild on the website? not sure what "hidden link" mean. |
One more thing if you use latest version |
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;
} |
It seems that I did same mistake in 404 page, it was not working on mobile. that |
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 |
@jcubic Everything works as intended right now. |
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: Also having issues with it scrolling back to the top on iPhone when entering a new command. |
@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. |
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 |
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. |
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. |
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. |
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. |
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! |
@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. |
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. |
Unable to write any command in mobile device
The text was updated successfully, but these errors were encountered: