Autocomplete="OFF" Not Working - Chrome Mobile - javascript

I've been battling with this for for 2 years... need your help.
In mobile chrome, I cannot disable AUTOCOMPLETE ...
Chrome ignores
autocomplete="off"
This is on android, but I presume on iPhone also.
I have a simple contact form - no passwords or anything.
I absolutely need this to work, becasue on mobile, when chrome shows Autocomplete options, it breaksuser experience. How do I force Chrome mobile to not show it???
I've read like every question on this and nothing worked - I don't know what to do

Chrome keeps changing the way it handles autocomplete on each version, I solved this using jQuery, I make all the fields readonly and onclick/focus make it Not readonly. try this jQuery snippet:
jQuery(document).ready(function($){
//======fix for autocomplete
$('input, :input').attr('readonly',true);//readonly all inputs on page load, prevent autofilling on pageload
$('input, :input').on( 'click focus', function(){ //on input click
$('input, :input').attr('readonly',true);//make other fields readonly
$( this ).attr('readonly',false);//but make this field Not readonly
});
//======./fix for autocomplete
});

If you have a form, you could try with adding autocomplete="off" to form as well.

Related

Chrome stopping default behavior of click()

All I find when I google this is the opposite.
I have this jquery for disabling form buttons after they were clicked once.
$('.btn').click(function (event) {
$(event.target).prop("disabled", true);
});
In Firefox (after adding autocomplete="off" because of this "feature") and IE this works as intended, the button is disabled but the form action is also performed, restricting the user form clicking it more than once. However in Chrome it stops the event propagation by itself, and I cannot find how to make it not do that.
You can force the form submission like that:
$(event.target).prop("disabled", true).closest("form").trigger("submit");

Phonegap Android show keyboard on input focus Javascript

I have been searching for how to trigger the android keyboard via Javascript.
I have found a few answers but none of them seem to work.
One solution is here:
Showing Android's soft keyboard when a field is .focus()'d using javascript
On the example above there is a button involved which I don't have, but do I need it?
I am using 'tap' and 'swipe' events via the touch-layer.js which seems to disable click events in favour of tap. (https://github.com/cubiq/touch-layer)
Below is the code I've tried, the alert triggers and the focus happens but the keyboard doesn't show.
gt("#txtEmail").on("tap", function() {
alert('tap');
$(this)[0].el[0].focus();
$("#txtEmail").trigger('click');
});
Thanks.
EDIT 1: Second attempt doesn't work even though this seems more inline with the example.
gt("#txtEmail").on("tap", function() {
alert('trigger');
$("#txtEmail").trigger('click');
});
$("#txtEmail").on("click", function() {
alert('recieved');
$(this).focus();
});
In addition to Jack He's suggstion, check out ionic-plugin-keyboard. This one is more actively maintained and used by many.
In my case, I just bound focus event to a handler function that manually shows the keyboard.
$(".my-input").on("focus", function(e) {
...
cordova.plugins.Keyboard.show();
...
});
What you need is the SoftKeyBoard plugin. Just check the link to find what you want.

Keypress event doesn't work in internet explorer

i have the follow code:
<input class="any" type="text" id="myId" name="myName" />
this input is a jquery datepicker.. (http://jqueryui.com/datepicker/)
My JS is as follows:
$('#myId').keypress(function(evt) {
//codes
});
I tried keypress, keydown and keyup.. all not working in IE..
May be because of the jquery date picker plugin?
I also tried with jquery hotkey plugin (https://github.com/jeresig/jquery.hotkeys/blob/master/jquery.hotkeys.js)
But, no success :(
i just want to capture the enter event..
Any help?
Felipe
If the element doesn't exist on the page on the initial load, then the event may not be bound to the button. Not sure why it works in other browsers though.
Could possibly try this to see if it helps
$(document).on('keypress', '#myId', function() {
// ....
});
if you're using an older version of jQuery, then you'll need to use .live().
Solved: http://jsfiddle.net/MJWUw/
IE doesn't recognize a keyevent just with click in this input, but if i navigate until the field with tabspace it works..
i did a workaround to solve this, set the focus manually and it's working right now.
$("#myId").click(function(evt){$(this).focus();});
$('#myId').keyup(function(evt) {
alert('working!')
});
att

Keyup event for text input box being capture by Google Chrome address bar

I am using the keyup event to fire the same event as clicking on the search button when a user presses the return key. When the search button is clicked it uses an Ajax request to load search results on the page.
The call works fine, but the keyup event is being captured when I press the return button in the address bar in google chrome after previously having focus on the input box, e.g. if the user types in a search query without pressing return, and instead goes to a new webpage using the Google Chrome address bar, when they press return on the address bar the search in my page is being submitted at the same time as the keyup event is being trigger even though the page, and certainly the input box, should no longer have focus.
JavaScript
$("#search-box").on("keyup", function(event) {
if(event.keyCode == 13){
$("#search-submit-btn").click();
}
});
HTML
<div class="input-append"/>
<input id="search-box" type="text" />
<button class="btn" id="search-submit-btn">Search</button>
</div>
I'm also using Twitter bootstrap to style the Input box, but I don't think this is causing the problem.
I've tested this page in Firefox and Safari without any issue. Does Google Chrome have a problem with the keyup event/is this a know issue? I'm struggling to find any information on the issue.
EDIT
I think I've solved my issue by using keydown instead of keyup. I've also added in a check if the element is still focused, but I don't think this makes a difference, since it still has the same affect with keyup.
$("#search-box").on("keydown", function(event) {
if($("#search-box").is(":focus")){
if(event.keyCode == 13){
$("#search-submit-btn").click();
}
}
});
This appears to be an okay solution for me, but it doesn't explain why keyup behaves so strangely in Google Chrome though. If anyone has anymore information about why keyup is this way in Google Chrome or if I am just doing something wrong, I'd be very interested to hear.

jQuery submit not working in Opera

I have a simple form which can be submitted outside the element via a small jQuery Script.
<script type="text/javascript">
$(document).ready(function() {
$('#mybutton').click(function(){
$('#myform').attr('action', '/url/to/form').submit();
});
});
</script>
The button is just a normal link
Just a normal link
The form is just a normal form
<form id="myform" action="/url/to/form">
....
<input type="submit" value="Search">
</form>
This works fine in IE, FF, Chrome, and Safari but not for Opera. In Opera it always redirects to my home page, not to the url of the form action. I have tried setting the action in the script (as above) and normally within the form action parameter but with no luck. I'm running that latest jQuery and Opera.
Please help
Edit: I'm also using the jQuery UI framework to handle some of the content and interactions
First thing I would do is change the handler to prevent the default action for the link:
$('#mybutton').click(function(ev){
ev.preventDefault();
$('#myform').attr('action', '/url/to/form').submit();
});
Using <a> tags for buttons means that you have to be careful that the browser doesn't get confused over the semantics. I don't have a lot of experience debugging things on Opera, but that's the first thing I'd suspect.
If there's no real "href" associated with the "button", I would question why it's an <a> tag at all; it could be just a simple <span>, which can also have a click handler attached but which does not have any potentially-problematic native behavior.
I believe it will be something to do with, with the currently incomplete jquery ui select class. It adds an a tag with a href as # i believe this may be your problem.
Try just $('#myform').submit(); instead of $('#myform').attr('action', '/url/to/form').submit();
Edit: As the other answer said, you will first have to call event.preventDefault(); before doing anything on the click event, as that prevents the browser from redirecting you.
Edit2: The right code would be:
<script type="text/javascript">
$(document).ready(function() {
$('#mybutton').click(function(event){
event.preventDefault();
$('#myform').attr('action', '/url/to/form').submit();
});
});
This should work fine.

Categories