Mobile keyboard does not open with Javascript focus event - javascript

Trying to focus a simple input text when page loads with Javascript events, my goal is to focus and open the virtual keyboard on mobile browsers but I've not gotten success.
My code looks like so simple as:
document.getElementById("anser-animation").focus();
document.getElementById("anser-animation").click();
I've tried on jQuery as well...
$('#answer-animation').focus();
$('#answer-animation').trigger('click');
On android input gets focus but not on iPhones. On both cases I don't get the keyboard intermediately on page loading. I'm not sure what's more I have to do.

To my knowledge. That is because Apple has decided to disable this functionality, when bind with $(document).ready(function (){});
What you could do (if target-page is reached via Ajax and/or if it's applicable in your case) is that when a button is pressed, i.e ("sign up") is trigger focus(); on the input field.
Like this:
$(".sign-up-button").click(function (){
$(".first_name").focus();
});
This is at least how I've solved it in the past, but if this won't work for you, then I'm sorry, but you're just out of luck, like so many of us. For now at least.

You have you do like this
$("#fname").trigger('focus');

Related

jQuery: Prevent page scroll when user's finger touches an element

I'm using the following jQuery plugin: http://willowsystems.github.io/jSignature/
I'm trying to do something very simple which is stopping page scrolling when the user's finger is inside a signature area (the page movement when writing a signature on the phone is excruciatingly bad to the point where you can't write your signature at all). I have tried the following which is not working in Firefox and I'm not sure why:
$('.signature').on('touchmove', function(e) {
e.preventDefault();
});
I have also tried this which isn't working either:
$(document).delegate('.signature', 'touchmove', false);
I've searched for hours and I can't seem to find anything that works. If anymore detail is required please let me know and I will happily append to the question.
Thank you very much for everyones help.
edit: I'm using the latest version of Firefox on the phone.
try to use the e.preventDefault() on the ontouchmove of the html element.
<div class="signature" ontouchmove="event.preventDefault();">
</div>
this example works for me:
http://jsbin.com/pulul/1/edit?html,css,output
Same problem in field on Android browser. Capturing signature gets dots instead of sig. So, testing in browser I see the focus is never lost from prior field when i click with mouse into jSignature. So, try something like this:
onblur="if(this.value.length>1) document.getElementById('CustomerSignature').focus()"
Welp, with that you'll see the onblur DOES NOT FIRE when you touch your jSignature but does fire when you touch your other fields. There ya go. Have not been able to reproduce the exact bug reported to me yet on the tablet; but I think the scroll is being sent to ANOTHER element.
So, fix is to force the focus to change to the jSignature. That's what I think.
For now, I fiddled around with the HTML so my last field is a select and use the onchange to set the focus to my jSig.

dojo onkeyup disabled after pressing tab on IE8

I have a problem with events on IE8 (dread!), using dojo toolkit 1.4.3 (can't use any other version) on a Spring application running on Websphere Portal Server.
Now, I don't believe the backend has anything to do with this, since the problem with IE8 tabbing is known:
press on any field of a webpage and press tab all the way, the focus goes back up to the url input and buttons and doesn't return to the document after repeating it, if you click on an element in a website it re-adds the focus to that element, but when you press tab again it goes back to the top of the browser.
Now, my problem happens AFTER tabbing all the way and getting the focus out of the document.
It would seem the browser is removing events from the DOM, I have debugged the code on IE8 and it seems to not trigger the callback function, while it behaves normally when not doing the whole tab thing.
I've tried using dojo.disconnect() and re-adding the events by subsequently calling dojo.connect() to no avail, here's a small snippet:
var connectedObjects = {};
dojo.query(".someClass").forEach(function(inputField){
connectedObjects[inputField.id] = {};
connectedObjects[inputField.id].onfocus = dojo.connect(inputField, "onfocus", function(event){
if(connectedObjects[inputField.id]){
dojo.disconnect(connectedObjects[inputField.id].onkeyup);
connectedObjects[inputField.id].onkeyup = dojo.connect(inputField, "onkeyup", someCallbackFunction);
}
})
});
Does anyone have any ideas on how to solve this?
so, this is a weird one, but there is a simple way to fix the problem, this also seems to fix other browsers from cycling through hidden input fields that have the css property display:none, so on to the code:
dojo.query("*").forEach(function(fieldID){
dojo.attr(fieldID, "tabIndex", "-1");
});

Form event incompatibilities between browsers, how to address?

I have a textarea on a html page, on google chrome, well I don't know what version because the user interface is deviously hidden, but on chrome the onChange="code" event isn't firing but on Firefox 11.0 1.0 (according to help->about) it is firing. Then instead I start playing around with the events onkeydown="same_function()", onpaste="same_function()" and oninput="same_function()", in order to be absolutely sure to capture at least one event. But now the problem is that I'm getting too many events, and when I check the textarea_dom_object.value of the textarea after getting a keydown event the key that was pressed isn't included in the value that I'm reading; if I have "abc" in the textfield and I press 'd', that generates a keypressed, but I'm still getting only "abc", not "abcd".
Is there a compatible way, or at least a way that works on most browsers, to get an event every time a textarea changes, but preferably only one event? I don't like the kind of ugly code I would have to write if I had to first test if I've already listened to an event and so forth. All I want is one event each time the text in the textarea changes.
Here's the thing about why jQuery is so amazing. It understands the need to gracefully degrade the code between browsers that don't support newer functionality. JavaScript in and of itself does not offer this support stand alone. By enhancing JavaScript's core capabilities in using jQuery, you are generally going to be more successful with cross browser support.
That being said...
There are still plenty of scenarios where you need to identify what device/browser you're working with so that you can perform the expected operations.
The most important thing to remember is that there is no 100% cross-support library in existence.
you can do this. just make sure you give the textarea an id tag
$(document).ready(function(){
$('.addtitle').keyup(function(event) {
if(event.keyCode==13) {
}
});
});
in my case here, im firing the function on the enter key (like facebooks functions).
EDIT: also if you have more then one textarea on a page, you should do this:
$(document).ready(function(){
$('textarea[name=mynamevalue]').keyup(function(event) {
if(event.keyCode==13) {
}
});
});

iOS5 Safari: Keyboard does not hide in a home screen HTML app

I am working on a custom application for the iPad that runs as a homescreen app, but is made in all CSS/HTML/Javascript. (not using the SDK here)
I have run into an issue with a calculator I have built into my page not hiding the keyboard. No matter what I do, the keyboard stays up. I have searched this extensively and tried everything I can think of, but the keyboard stays up no matter what I do.
Explanation of what I have tried to hide the keyboard:
I have tried to blur all input fields to remove focus. I have tried setting focus onto non-text field items.
There were several threads on Stackoverflow from earlier this year/last year that suggested both of those options, but they do not appear to be working anymore.
To test further, I put a blank a href="#" on an img that was above the calculator, so that I could set focus on a non-entry and see if that would auto-minimize the keyboard. When I tap that item above the keyboard the focus changes and I am no longer in input mode, but the keyboard stays up.
Did Apple break this functionality with the latest update? If so, is there a work around?
Here is some example code that doesn't work:
$('input').blur(function(e) {
// Keyboard disappeared
window.scrollTo(0, 1);
});
That code successfully removes focus from the inputs, but the keyboard stays up. I have also attempted the inverse of that by just .focus ing on a non-text element. And additionally, as stated previously, I have straight-up just added a non-text element on the page and that still doesn't hide the keyboard.
Thanks so much for any help, and feel free to link/abuse me if I have mistakenly reposted. :)
you should be able to blur it just by using something like this
$('input').blur();
you should put this inside the function/procedure that happens when you want it to disappear, unless your looking to disable it completely?
document.activeElement.blur() inside a try catch block works for me. (Possibly you also need a setTimeout? I didn't need a timeout, and it is important to avoid timeouts wherever possible because they can easily cause nasty heisen-bugs!)
Also double check that you are not calling focus() somewhere within a mousedown or click event (which causes the keyboard to show). You can use a console.log(document.activeElement.tagName); or similar to help find what has current focus.
However if you don't find a solution then I am very interested in seeing how you get the keyboard to stay up... I have a use for that :-)

Custom autocomplete arrow control

I am trying to make custom autocomplete input (I know about jQuery UI autocomplete, but I decided to write a simple one). Everything went fine, I did all the 'general' stuff - sending data to some PHP script, receiving suggestions. Then I enabled choosing an element on a mouse click, and also did some navigation using down arrow, up arrow and enter keys. But I got stuck with an ambition to enable 'holding down\up arrow key' navigation (flicking through). A handler on my input listens for keyup event, and I perfectly understand that all I want is keypress event, because it maintains key hold. But keypress only works for printable characters which doesn't include down arrow\up arrow. So the question is: how can I make it work without keypress, or can I somehow override this event's maintained keys?
Thanks everybody, I've found the solution. Although keypress is meant to be fired only on printable characters, latest Opera and Firefox 5 do support it. But Chrome (and probably Safari, as they are quite similar) doesn't, whereas keydown gives the result I need.
If there is no way to overcome the keypress difficulty try something like this. This is pseudocode I didn't do all the keycode detection.
var keyStop
onkeydown = function(){
keyStop = setInterval(function(){scrollDown()},250);
}
onkeyup = function(){
clearInterval(keyStop);
}
If you for some reason got stuck in your development, I would recommend Better Autocomplete, which is a lightweight jQuery plugin which is easy to customize.

Categories

Resources