html input won't take input without left mouse button hold - javascript

I'm working with the Kitchen sink script at fabricjs.com. I ran into a problem where I can't type anything in any inputs unless I hold the left mouse button down. You can see how it's appearing by trying to type a canvas color into the Canvas near the top. I tested in FX, and IE. Chrome gives the windows color picker which is pretty cool. Not sure what's causing the issue as I tried another version of JQuery with the same result. WC3 validation didn't yield anything that would cause it either. Thanks for looking.

Looks like your problem is with paster.js. Specifically lines 24-28:
// make sure it is always in focus
pasteCatcher.focus();
document.addEventListener("click", function() {
pasteCatcher.focus();
});
Which means that any time you click anywhere (including in your background colour input box), focus is immediately stolen by the pasteCatcher. Notice that you can use the keyboard to navigate to the input box and it all works fine until you actually click a mouse button.

Related

element.focus() with open developer console not working

I want to programmatically focus on an input:
document.getElementById('widgetu25071_input').focus()
This does not work when the developer console is open. Is there some way to do it without closing the console first?
You can recreate the issue on google.com:
Open console and execute:
document.getElementById('lst-ib').focus();
result for me: does not focus
now try: open console and execute:
setTimeout(function() {
document.getElementById('lst-ib').focus();
}, 9000);
close console quickly. Focus works when the timeout is finished.
I forget about this every couple years and it drives me crazy until I remember again. So I'm adding an answer for myself and anyone else...
JavaScript basically thinks you're in a different application and can't steal focus to focus wherever you want to focus. ; )
You'll find this behavior if your cursor is in the console or in the URL bar of the browser.
Mouse hover events will still fire but you won't be able to gain focus anywhere on the page unless focus is already on the actual page.
So for example, if you have a little popup that contains a text field and it shows on mouse hover of some other element, you'll get the pop-up on mouse hover but you won't get that text field to focus if your cursor is in the console or in the URL bar.
As a crazy guess I'd say without this, a bad programmer could keep you from navigating away from the page (or doing anything else) by stealing focus back to the page every time you click in the URL bar or the console.
I hope this helps someone even if It's five years later.

Scroll to Focused Field Cordova

My Issue
I am currently in the process of writing an application for iOS using Cordova. I have a page with a form on it like so:
When the user taps on a field, the keyboard appears as expected on iOS. However, to prevent my app from moving off the screen, I have enabled the following setting:
// Prevent the keyboard from pushing up the webview
cordova.plugins.Keyboard.disableScroll(true);
Unfortunately, this prevents a few things that are causing me issues:
When a field is focused, the screen does not scroll to that field so sometimes, the field appears behind the keyboard.
Even if I did have a solution to the above, for the elements that are at the bottom of the screen, I will not be able to scroll down far enough to bring them into view above the keyboard.
My Question(s)
Solution 1
Is there any way, in Cordova, to auto scroll to the focused field without moving the whole app off the screen?
If it is possible, then how can I handle fields that are close to the bottom and cannot be scrolled up any further into view?
Obviously, the first point can be achieved using JavaScript/jQuery and some clever logic with the keyboard_height, position() and scrollTop(). But, this then creates the issue with the second point about the input fields behind the keyboard...
Solution 2
If I apply the following code, it will fix the issue highlighted above, but it will create another issue (explained below):
// Enable the auto scroll when the keyboard is shown
cordova.plugins.Keyboard.disableScroll(false);
Is there anyway to fix my header (the 'Edit Profile' bit), to the top of the screen to ensure that part is always visible?
Use https://www.npmjs.com/package/cordova-plugin-keyboard#keyboardshrinkview and its Keyboard.shrinkView method.

Enable/Disable Android virtual keyboard with dummy textarea

I want to have virtual keyboard for jquery terminal, here is my test code: http://terminal.jcubic.pl/android.html
the plugin code is here: http://terminal.jcubic.pl/js/jquery.terminal-src.js (uncommitted)
For a moment it was working but it stopped, even then I run focus and blur on textarea the keyboard don't show up. The cursor is not in textarea. The focus/blur work when I run the page on desktop Chromium.
Anybody know why textarea don't have focus?
Sometimes the cursor is inside but the keyboard don't show up and there is no that green outline. Sometime it get focus but then blur. Virtual keyboard show up only when I click inside textarea. I can't find any code that may cause this and why it was working for a moment (but not exactly I wanted).
I've try:
$('textarea').blur(function() { return false; });
or call preventDefault when I click the terminal. (the textarea is my clipboard but I want to reuse it). I keep trying different things with no success.
I've solve the issue, two things about andorid I've found. You can't delay action that trigger focus on textarea/input it need to be direct call (stack of focus call need point to html/browser native action), and it's seems that you can focus (trigger virtual keyboard) only on native events, (for instance you can't focus on load).

Why does my token input break on mobile?

You can see my token input here on the search box: http://pineapple.io/
Under normal circumstances, there is a hidden input that expands when you click in the box.
It seems to work great in all desktop browsers, but on a mobile phone when you click in the right area of the box (which normally works on a desktop), it doesnt click inside the tiny invisible input. You need to actually click to the farthest most point (directly to the right of the magnifying glass) and then it will work.
Here is where it must be clicked:
I assume this has to do with the 'touch' rather than click functionality of a phone?
Source is here: http://loopj.com/jquery-tokeninput/
Your input is really small (currently it's hard-coded at width: 30px), hence why the mobile doesn't like it. Can you make that bigger? That would probably help a lot!
Here's a picture to explain:
http://cl.ly/image/0b3N471F1y3O

Disabling middle click scrolling with javascript

Background: I am creating a table reminiscent of whenisgood.net, in that it has click-n-drag toggling for table elements. I want to call different types of toggling code when the left, middle, and right mouse buttons activate a mousedown event.
By using JQuery, I'm off to a good start.
$(".togglable").bind("contextmenu", function() {return false;});
$(".togglable").bind("mousedown", function(e){
e.preventDefault();
toggle(this, e);
});
In the toggle() function I can use e.which to determine what button was clicked.
The punchline: I used e.preventDefault() hoping that it would stop the middle click default behavior of scrolling. It didn't. What can I do to stop the scroll action from activating?
See also "Triggering onclick event using middle click"
Middle-click can be disabled with Javascript, but only in IE, WebKit, and Konquerer. Firefox requires a config file edit. It's 2017 and firefox 50 supports this.
This is an old question...but if I'm understanding it properly, you want to disable scrolling via the middle mouse button click.
Nowadays, you can do this with a single line of vanilla JS:
document.body.onmousedown = function(e) { if (e.button === 1) return false; }
Currently, my solution is this: (more jquery!)
$(".togglable").wrap(
"<a href='javascript:void(0);'
onclick='return false;'></a>"
);
By wrapping it in a link (via jquery wrap), browsers think it's a link and don't scroll on middle click, even if you drag your mouse around. With this setup, and my situation, there are a couple (minor) gotchas.
Firefox will open a new tab when you middle click, but only if you don't drag. Opera will open a new tab when you middle click, drag or not. That's why I used href='javascript:void(0);' instead of just href='#'--so that the client's browser wouldn't load a whole page, just a blank page with a strange url.
But this solution works like a charm on Chrome and Safari. It works well with IE8, except that now when I left-click-n-drag, it changes the pointer to a "can't do that" symbol, since it thinks I want to drag the link somewhere. Untested on older versions of IE.
It is a bit old thread already, but I've tried hard to circumvent this in Firefox (I'm still using 3.6) and I'll share my findings, maybe someone will find it helpful.
Check that if you create an empty HTML file (or a small document with couple of paragraphs) and load it in Firefox, middle click scrollbar does not appear. This is because <body>'s width and height are smaller than window size. If you put a lot of <br>'s, this is not the case and scrollbar appears on middle click.
Google managed to prevent middle click scroller to appear in Google Maps in Firefox by making sure (through JS) that <body> size is always less than window size, plus additionally putting
<body style="overflow:hidden;">.
This is hardly achievable in general case, but sometimes might be useful.

Categories