I have a form with an input field:
<input id="postalCode" placeholder="Postal Code* (A0A 0A0)" autocomplete="off">
I was using my own custom autocomplete here which google autofill COVERS and ruins the validation and user experience in my form.
I have tried changing the id to something random id="ASDf" and still google infers the field type by the validation or placeholder. I have tried the autocomplete="off" and "false". Neither do anything. On this page:
https://www.canadapost.ca/cpotools/apps/fpc/personal/findAnAddress?execution=e1s1
They have successfully disabled it somehow.
I have tried everything from this page:
Disabling Chrome Autofill
And nothing works.
Ok this worked for me:
role="presentation" autocomplete="nope"
tested on Chrome Version 64.0.3282.186 (Official Build) (64-bit).
I had to add both of those to each input in question. I also added to the form tag. For this specific version of Chrome the autofill is disabled. I am leaving this here because this is a real pain and ALL the up front solutions in other posts DO NOT work.
Solution : Replace 'Name' with your #id.
$('#Name').on('mouseup keyup', function () {
var val = $('#Name').val();
val = val.length;
if (val === 0) {
$('#Name').attr('autocomplete', 'on');
}
else {
$('#Name').attr('autocomplete', 'new-password');
}
}).on('mousedown keydown', function () {
var val = $('#Name').val();
var length = val.length;
if (!length) {
$('#Name').attr('autocomplete', 'new-password');
}
})
Related
I need a text field with the following behavior:
When the field is rendered, the current contents are hidden with password style (******), but if the user tries to edit it, the field gets cleared and they see on clear text what they are typing (so the behaviour is not entirely equivalent to PasswordTextField).
Any idea on how to achieve this behavior?
Thank you!
I think you should use some JavaScript to turn the field readable when focus event is fired. Here you can find a simple script that does the magic:
https://www.w3schools.com/howto/howto_js_toggle_password.asp
UPDATE:
In order to get the required behavior try the following code in the page above:
<!DOCTYPE html>
<html>
<body>
Password: <input type="password" value="FakePSW" id="myInput" onfocus="myFunction()"><br><br>
<script>
function myFunction() {
var x = document.getElementById("myInput");
x.value = "";
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
The Google autocomplete API doesn't seem to be activating by pasting content into a text input with the mouse. It works fine if involving the keyboard at all, but not with just mouse.
I did notice, however, that after you paste your content into the text input it will activate from almost any keypress (tested right arrow key, end key, space).
You can repro it here on their autocomplete demo site.
Is this a bug? or as designed? If it's as designed, how to apply workaround?
I've got this as a workaround so far, but no simulated keypress events seem to work.
$('.txtLocation').bind("paste", function (e)
{
$('.txtLocation').focus();
var e = jQuery.Event("keydown");
e.keyCode = 39; //39=Arrow Right
$('.txtLocation').trigger(e);
});
It seems this impacts not only the context-menu Paste, but also that of Edit|Paste from the browser menu bar as well as the iOS paste functionality. I've opened a bug with Google. You may wish to "Star" that bug report to catch updates.
I found a workaround that, while a bit of a hack, seems to fix the problem. If you store the pasted value, switch focus on a different field, set the value in the Autocomplete field, and finally focus back on the Autocomplete field things work more or less as expected. Also, you have to do this in a setTimeout() callback - the delay time doesn't seem to matter at all, but if you just do this inline you won't see the expected results.
Here's a code sample of what I'm describing above:
$("#address_field").on("paste", googleMapsAutocompletePasteBugFix);
googleMapsAutocompletePasteBugFix = function() {
return setTimeout(function() {
var field, val;
field = $("#address_field");
val = field.val();
$("#price").focus();
field.val(val);
return field.focus();
}, 1);
};
The last focus() is optional, but the UI is a little less surprising than if you just skipped automatically to the next field.
Following solution seems to work for me (existence of field ending with "address_2" is assumed). Tested on IE8, IE9, IE10, Chrome, FF and Safari
if document.addEventListener
$(document).on("paste", "[name*=address_1]", #googleMapsAutocompletePasteBugFix)
$(document).on("onpaste", "[name*=address_1]", #googleMapsAutocompletePasteBugFix)
else
for element in $("input[name*=address_1]")
document.getElementById($(element).attr('id')).onpaste = #googleMapsAutocompletePasteBugFix
googleMapsAutocompletePasteBugFix: (e) ->
unless e
e = window.event
if e.srcElement
target = e.srcElement
else
target = e.target
field = $(target)
fieldId = field.attr('id')
focusSwitchFieldId = fieldId.replace(/(\d)$/, '2')
setTimeout(->
if window.chrome || /Safari/.test(navigator.userAgent)
val = field.val()
$("##{focusSwitchFieldId}").focus()
field.val(val)
field.focus()
else
field = document.getElementById(fieldId)
val = field.value
document.getElementById(focusSwitchFieldId).focus()
setTimeout(->
field.value = val
field.focus()
field.focus()
, 50)
, 10)
extjs× 6627,3.x version, In mozilla browser reset is working for inputType :'file', but its not working for IE8 Browser and this is my code,
xtype :'textfield',
name:'Policy_fileUpload',
id :title+'_uploadFile',
inputType :'file',
fieldLabel :'Upload File and Location<font color=red>*</font>',
blankText :'Please choose a file',
anchor :'100%',
required :true,
autoShow :true
now am resetting this field by using the reset property
xtype:'button',extjs× 6627
id:title+'cancelButton',
width:100,
text:'Cancel',
listeners : {
'click':function(){
Ext.getCmp(title+'_uploadFile').reset();
}
help me to solve this Thanks in advance.
It seems to be a security 'feature' in IE8. Here are related topics where solution for this problem is given using jQuery:
Empty input type file doesn't work in IE
Clearing <input type='file' /> using jQuery
Both of them suggest something in the lines of recreating the input field. To do that in ExtJS 3.x, you may try something like this:
listeners : {
'click':function(){
var uploadField = Ext.getCmp('_uploadFile');
if (Ext.isIE8) {
var cfg = uploadField.initialConfig;
uploadField.destroy();
var parentCt = Ext.getCmp('parentContainer');
parentCt.insert(0, cfg);
parentCt.doLayout();
} else {
uploadField.reset();
}
}
}
Also, it seems that IE9 behaves in the same way. So you may want to have if (Ext.isIE) instead of if (Ext.isIE8).
I'm making a mobile-app using Phonegap and HTML. Now I'm using the google maps/places autocomplete feature. The problem is: if I run it in my browser on my computer everything works fine and I choose a suggestion to use out of the autocomplete list - if I deploy it on my mobile I still get suggestions but I'm not able to tap one. It seems the "suggestion-overlay" is just ignored and I can tap on the page. Is there a possibility to put focus on the list of suggestions or something that way ?
Hope someone can help me. Thanks in advance.
There is indeed a conflict with FastClick and PAC. I found that I needed to add the needsclick class to both the pac-item and all its children.
$(document).on({
'DOMNodeInserted': function() {
$('.pac-item, .pac-item span', this).addClass('needsclick');
}
}, '.pac-container');
There is currently a pull request on github, but this hasn't been merged yet.
However, you can simply use this patched version of fastclick.
The patch adds the excludeNode option which let's you exclude DOM nodes handled by fastclick via regex. This is how I used it to make google autocomplete work with fastclick:
FastClick.attach(document.body, {
excludeNode: '^pac-'
});
This reply may be too late. But might be helpful for others.
I had the same issue and after debugging for hours, I found out this issue was because of adding "FastClick" library. After removing this, it worked as usual.
So for having fastClick and google suggestions, I have added this code in geo autocomplete
jQuery.fn.addGeoComplete = function(e){
var input = this;
$(input).attr("autocomplete" , "off");
var id = input.attr("id");
$(input).on("keypress", function(e){
var input = this;
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(37.2555, -121.9245),
new google.maps.LatLng(37.2555, -121.9245));
var options = {
bounds: defaultBounds,
mapkey: "xxx"
};
//Fix for fastclick issue
var g_autocomplete = $("body > .pac-container").filter(":visible");
g_autocomplete.bind('DOMNodeInserted DOMNodeRemoved', function(event) {
$(".pac-item", this).addClass("needsclick");
});
//End of fix
autocomplete = new google.maps.places.Autocomplete(document.getElementById(id), options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
//Handle place selection
});
});
}
if you are using Framework 7, it has a custom implementation of FastClicks. Instead of the needsclick class, F7 has no-fastclick. The function below is how it is implemented in F7:
function targetNeedsFastClick(el) {
var $el = $(el);
if (el.nodeName.toLowerCase() === 'input' && el.type === 'file') return false;
if ($el.hasClass('no-fastclick') || $el.parents('.no-fastclick').length > 0) return false;
return true;
}
So as suggested in other comments, you will only have to add the .no-fastclick class to .pac-item and in all its children
I was having the same problem,
I realized what the problem was that probably the focusout event of pac-container happens before the tap event of the pac-item (only in phonegap built-in browser).
The only way I could solve this, is to add padding-bottom to the input when it is focused and change the top attribute of the pac-container, so that the pac-container resides within the borders of the input.
Therefore when user clicks on item in list the focusout event is not fired.
It's dirty, but it works
worked perfectly for me :
$(document).on({
'DOMNodeInserted': function() {
$('.pac-item, .pac-item span', this).addClass('needsclick');
}
}, '.pac-container');
Configuration: Cordova / iOS iphone 5
I have a strange problem. This code works fine in chrome and firefox, but in IE 8 the live event will not fire the first time I uncheck a box. If I check it and then uncheck again it works every time after that.
My serverside code in the view
<%: Html.CheckBox("select-invoice-" + invoice.InvoiceNumber,
true,
new { title = "choose to not pay anything on this invoice by unchecking this box" }) %>
renders to this
<input checked="checked" id="select-invoice-TST-1001"
name="select-invoice-TST-1001"
title="choose to not pay anything on this invoice by unchecking this box"
type="checkbox" value="true" />
Here is my javascript live event wireup, simplified
$(function () {
$("[id^='select-invoice-']").live('change', function () {
var invoiceId = $(this).attr('id').substr('select-invoice-'.length);
ComputeTotalPayment();
if ($(this).is(':checked')) {
//save invoice data
} else {
//remove invoice data
}
});
});
There are no errors in the javascript on any browser. If I switch IE to compatibility mode the live event never works. Other live events for clicks on links work just fine.
The change event doesn't fire correctly in IE until the checkbox loses focus.
Bug: http://webbugtrack.blogspot.com/2007/11/bug-193-onchange-does-not-fire-properly.html
You'll need to map to the "click" event instead.
I have found that change causes some problems in IE. Try using the click event instead. This appears to fix the problem.
I had a similar problem and solved it by calling .change() once on page load.
$(function () {
$("[id^='select-invoice-']").live('change', function () {
var invoiceId = $(this).attr('id').substr('select-invoice-'.length);
ComputeTotalPayment();
if ($(this).is(':checked')) {
//save invoice data
} else {
//remove invoice data
}
}).change();
});