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
Related
When clicking on an an input type=text, a keyboard comes up. Unfortunately, that changes the height of the web page, so that all the thinks that were "stickied" to the bottom of the page want to come up above the keyboard.
And, in my case, the element that's anchored to the bottom of the page (e.g. the Apply button below) ends up covering the next input element (e.g. Max textbox), so that when the user presses Next on the virtual keyboard, you can't see it at all because the button is still covering it.
My question is whether there is any way to prevent the keyboard from changing the height of the page?
P.S. On iOS it works like you would expect. Bringing up the keyboard doesn't change the dimensions of the page.
It is default behavior on Android devices. As I know, you can not prevent this.
My website uses several input text elements and they are defined in HTML like:
<input type='text' style='width:200px;'/>
However if I open my webpage and I click on these inputs, they look like this:
So they display with no cursor and no blue border when they are selected.
But if I click outside the chrome browser, for example if I click on my desktop and then back to chrome, the inputs work and look like following:
So after this step, they look how they are supposed to.
This only happens in chrome and only on the server, all works fine on localhost.
I have no blur functions or anything else. What causes this issue?
Do anyone have any ideas about this?
Thank you very much!
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.
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.
The scenario, I have an input text field I'm doing partial auto-complete on (exactly like the Tags input field on Stack Overflow... because that's what is, basically).
As a user is typing, I suggest things they may typing; the user then clicks one the suggestions, it replaces a bit of the fields content, and places the cursor after where the insert occurred.
All this works, but after the insertion the software keyboard isn't shown anymore. You can replicate this on the desktop Stack Overflow site.
The code on SO isn't exactly the same, though the symptom is.
Here's the actual code called after the text is inserted into the text field.
$(field).focus()[0].setSelectionRange(newCaretPos, newCaretPos);
(Yes yes, setSelectionRange is non-standard; but it works on all the mobile devices I care about just this moment, so ignore it for now)
On android, iphone, etc. this works fine (the keyboard "flickers" but I'm willing to live with it.
So, the question basically boils down to: How can I force the onscreen keyboard to appear on Windows Phone 7 (Mango update)?
Sorry, there is no guaranteed way to force the SIP to display in WP7. :(
Normally setting the focus on the textbox would force the keyboard. Have you tried just setting the focus? (i.e. not setting the selection range)