autocomplete="off" not working for Google Chrome - asp.net

This question has been asked Several times in the past but unfortunately there's no way i could disable autofill for Google Chrome (v.36.0.1985.125 m)
I have already Tried
"AutoComplete=Off" not working on Google Chrome Browser
How do I stop Chrome from pre-populating input boxes?
how to disable google chrome suggestion list when using twitter bootstrap typeahead?
Code tested so far
<form autocomplete="off">
<asp:textbox autocomplete="off">
AutoCompleteType="Disabled"
But I still get autofiled data on my login page. Passwords are populated even if Textbox Ids are changed.

Since I have been having this very same issue and it seems all "alternatives" stopped working as the browsers have been getting recent updates, I came across a "dirty" solution that baffled me completely.
If we go on each field we want to disable the autocomplete feature and set its autocomplete attribute to an invalid value (only "off" and "on" are valid), the browser will stop trying to autofill those fields because of that.
Surprised? So was I!
Example:
<input type="text" autocomplete="stopdoingthat" />
And apparently it works. Stupid, I know, but it's a "dirty" one that actually works for now.

Recent Version of Google Chrome are forcing Autofill irrespective of the Autocomplete=off . You are going to need little bit of hack here. Some of the previous hacks don't work anymore (34+ versions)
I have tested following code on Google Chrome v36.
It removes "name" and "id" attributes from elements and assigns them back after 1ms. This works perfectly in my case.
Put this code in document ready.
$(document).ready(function () {
$('form[autocomplete="off"] input, input[autocomplete="off"]').each(function () {
var input = this;
var name = $(input).attr('name');
var id = $(input).attr('id');
$(input).removeAttr('name');
$(input).removeAttr('id');
setTimeout(function () {
$(input).attr('name', name);
$(input).attr('id', id);
}, 1);
});
});;

For Asp.Net TextBox adding TextMode="Search" and AutoCompleteType="Disabled" worked for me
<asp:TextBox runat="server" ID="txtAddress" CssClass="form-control" TextMode="Search" AutoCompleteType="Disabled"></asp:TextBox>
and i tested this in both Edge (Version 89.0.774.48) and Chrome (Version 88.0.4324.190 )

This readonly-fix worked for me:
fix browser autofill in: readonly and set writeble on focus (at mouse click and tabbing through fields)
<input type="password" readonly
onfocus="$(this).removeAttr('readonly');"/>
By the way, some more information on Chrome and Safari auto fill behaviour:
Sometimes even autocomplete=off would not prevent to fill in credentials into wrong fields, but not user or nickname field. I guess, the Chrome and Safari look for a password field to insert your saved credentials. Then it autofills username into the nearest textlike-input field , that appears prior the password field in DOM (just guessing due to observation). As the browser is the last instance and you can not directly control it, but the read-only trick above fixes it. :-)

Figured I'd update this with a 2016 post. I used a combo of both Sangram's solution, as well as dsuess'. This is working for me as of the time of this post.
Sangram's solution unfortunately no longer worked for me with a later Chrome version, but using dsuess' method of marking the fields as readonly, while not visually appealing (since they stay readonly until you actually focus on the element, which isn't the most intuitive way to do it - but whatever works, right?), did still work.
By combining the two, we no longer require the user to focus on the field. Here is my web page code:
<asp:TextBox ID="TeamName" runat="server" TextMode="SingleLine" AutoCompleteType="Disabled" ReadOnly="true"></asp:TextBox>
Which, for the curious, after being parsed by IIS, renders to the following raw HTML:
<input name="ctl00$MainContent$uc_CreateTeam$TeamName" type="text" autocomplete="off" id="MainContent_uc_CreateTeam_TeamName" readonly="readonly">
The accompanying js:
// Disable autocomplete for form fields. This is done by setting the 'autocomplete' attribute (which is deprecated)
// as an indicator that we want this field to not be autofilled. We also set these forms to load as readonly (which
// will cause browsers to ignore them), and now we mark them writable.
$(document).ready(function() {
$('form[autocomplete="off"] input, input[autocomplete="off"]').each(function() {
var input = this;
setTimeout(function() {
$(input).removeAttr('readonly');
}, 200); // 100 does not work - too fast.
});
});
Hopefully this helps any stragglers still looking for the solution a few years later!

Look, the only way to fix this is to petition the Chromium developers. Get on their forums and tell them what a pain this is. Every workaround is eventually destroyed by them.
https://bugs.chromium.org/p/chromium/issues/detail?id=914451
As of right now, having a unique ID on the control fixes it.
My recommendation is to use the user's session ID as part of the control ID on the page. That currently works across the board. But it won't forever.

Make type of password field as 'text' and change it to 'password' on click.
HTML:
<input autocomplete="off" id='username'>
<input autocomplete="off" id='password' type="text" onclick="changeType('password')">
js:
changeType(id) {
document.getElementById(id).setAttribute('type', 'password');
}

work for me :
<asp:TextBox ID="TextBox" runat="server" Text='mootez'onfocus="this.autocomplete='off'" ></asp:TextBox>

My suggestion change the name of the control. For example, I had a control named txtFirsName and always it showed me autocomplete suggestions, I changed by txtFN and Ready!

Related

Auto Complete not working on IE for a asp.net textbox

I have a simple textbox where I am trying to make the Autocomplete enable.
Example:
Works fine on Chrome and not on IE.
I even changed the settings on IE and made the AutoComplete enabled over there. But still there is no change.
Here is the code for the textbox which is inside a div tag.
<asp:TextBox runat="server" ID="txtSender" CssClass="span8 input-large"
ClientIDMode="Static" MaxLength="255" AutoCompleteType="FirstName"/>
Can anyone please suggest what might be the reason behind it?
In Internet Options (Options -> Content -> AutoComplete) try to "Delete AutoComplete history".

Format kendoui textbox as phone number using jquery.inputmask plugin

I'm trying to format a textbox control in kendoui as phone number, using data- attributes
The backend field is string.
I made it as:
<asp:TextBox runat="server" CssClass="k-textbox"
data-role="numerictextbox"
data-spinner="false"
data-format="(###) ###.####"/>
and
<asp:TextBox runat="server" CssClass="k-textbox" data-format="(###) ###.####"/>
but none works.
First one does not display any intermediary formatting characters or spaces: ( ) -
Second does not enforce digits, as well as not display any intermediary formatting characters.
Any suggestions?
EDIT
I just find out jquery.inputmask, and tried to use it. I included the script jquery.inputmask, and added the data-inputmask attribute as below
<script src="/scripts/jquery.inputmask/jquery.inputmask-2.4.20.js"></script>
....
<input type="text" class="k-textbox" data-inputmask="'mask': '(999) 999.9999'"/>
but nothing happened.
How should I trigger mask enforcement?
I don't want to use jquery call for each control like
$("#myctrl").inputmask({"mask": "(999) 999.9999"})
but instead use data-attributes
Thanks
You should use the HTML5 phone number input type.
html5 input types
As far as I am aware KendoUI does not have a widget or control to format input field such as phone numbers. It is planed to be incorporated soon this year, I think it has not been release yet:
http://feedback.kendoui.com/forums/127393-kendo-ui-feedback/suggestions/2404523-just-a-mask-edit
In the meantime I would recommend you using one of the JQuery options available, like these 2 examples:
https://github.com/RobinHerbots/jquery.inputmask
http://digitalbush.com/projects/masked-input-plugin/
Here is a link to a working fiddle using the data-inputmask attributes that you would like to use.
You had assigned the mask in the attribute correctly..
<input type="text" class="k-textbox" data-inputmask="'mask': '(999) 999.9999'"/>
Your problem is that you never selected the elements and then applied the inputmask. The data-inputmask is just an attribute that will store the mask definition, it doesn't run automatically.
You need to add this.
$(document).ready(function()
{
$('[data-inputmask]').inputmask();
});

Checking a radio button with jQuery when radio button is runat="server"?

Using jQuery I want to be able to click an element which will also checks it's related radio button. I had this working fine until we had to add runat="server" to the radio buttons.
When I apply this it prevents my jQuery function from working and I cant figure out how to get round it, heres a simplified version of the code:
HTML
<input type="radio" runat="server" id="sector1Radio" name="SectorGroup" title="Sector1" />
jQuery
$('#SomethingElse').click(function() {
$('input[title=Sector1]').attr('checked','checked');
});
I've found out that when its converted to a .net control instead of checked="checked" (as it would be usually) it is just Checked, so I changed that but on inspecting the DOM in multiple browsers, none of my radio buttons are being checked :-(
Are there any other ways I can use jQuery to check a radio button that has runat="server"?
Cheers!
I think that Your problem is that the id of the input is no longer sector1Radio but rather ctl00_sector1Radio or something similar. This happens if Your input control is inside e.g. a ContentPlaceHolder control (when using master pages).
Can You check the generated HTML code (in the browser) to verify if this is the case? What is the id of the input control?
If this is the case, You need to generate Your js jQuery code
$('#SomethingElse').click(function() {
$('input[title=Sector1]').attr('checked','checked');
});
from codebehind so that SomeThingElse is replaced with the ClientID of the control.
.is(':checked') works on ASP.NET radiobuttons and checkboxes
$('#SomethingElse').click(function() {
$('input[title=Sector1]').is(':checked');
});
try using
$('input[title=Sector1]').attr('checked',true);
and
$('input[title=Sector1]').attr('checked',false);
or maybe
$('#SomethingElse').click(function () {
$('input[title=Sector1]').attr('checked',!$('input[title=Sector1]').attr('checked'));
});
As suggested by others, ASP.net will not generate the html with the same ID you specified.
Quick solutions:
You can keep using the id but asks jquery to check the end of the id instead, example:
$("input[id$='sector1Radio']").is(":checked");
Or check against the title and name as Nico suggested
Use the class element which is not effected by ASP.net, example
<input type="radio" runat="server" id="sector1Radio" class="sector1Radio" name="SectorGroup" title="Sector1" />
$("input.sector1Radio").is(":checked");
Best thing is to view the generated html code and see what id is giving you, then you can use the appropriate jquery selector, because the generated id could have different extensions depends whether you use master pages, etc.
If you are using a MasterPage or are creating the controls dynamically then it is probable that the control ID's are being renamed #SomethingElse becomes #MainContent_SomethingElse.
The easiest way to check this is to use the WebDeveloper plugin for Firefox or Chrome.
Go to Information -> Display Element Information and then select the object in question. It will give you it's ID, class, as well as ancestor and children information.
Check to see if the ID is being changed dynamically by the .NET.
If that's the case:
To prevent this, in the server side code you can use the following attribute to create static ID's
SomethingElse.ClientIDMode = ClientIDMode.Static;
You can then reference in you jQuery
$('#SomethingElse').click(function() {
if ($('input[title=Sector1]').attr('checked')) {
//execute event
});
I think what happens is that in ASP NET Checkboxes and Radio Buttons generates an "input" and a "span" after the input. So you need to select the input only.
You can try:
$('.classname input[type=checkbox]').each(function() {
this.checked = true;
});
Two things here: finding the control and executing the check. In ASP.NET, your control's actual ID and name will end up getting changed based on the runat="server" containers in which it appears, even if those containers have no Ids.
Rendered ASP.NET controls always end with the same name as you started with, so a tag like:
<input type="radio" runat="server" id="sector1Radio" title="Sector1" />
might end up being rendered as
<input type="radio" runat="server" id="ctl0$ctl0$sector1Radio" name="ctl0_ctl0_SectorGroup" title="Sector1" />
You can find this element, even after it is rendered if you use the "contains" selection syntax in JQuery. So to find this element, once rendered, you could use:
$("input[type='radio'][id*='$sector1Radio']")
This syntax will find any radio button whose id contains "$sector1Radio"
Once you have the element, you can check or uncheck it using the following code, which you'd call from the click event of your other element.
// check the radio button
$("input[type='radio'][id*='$sector1Radio']").attr('checked', true);
// uncheck the radio button
$("input[type='radio'][id*='$sector1Radio']").attr('checked', false);
One last thing... if you just want a block of text to click the button when pressed (wrap it in an tag and set the AssociatedControlId property to the control name of your radio button, like this...
<input type="radio" runat="server" id="sector1Radio" title="Sector1" />
<asp:label runat="server" id="lblsector1Radio" associatedControlID="sector1Radio">clicking here clicks and unclicks the radio button</asp:label>
I had the same problem. To use the jQuery UI to make your radiobuttons nice one has to write:
<div id="radio">
<input type="radio" id="radio1" runat="server" />
<label for="radio1">The label of the radio button</label>
...
</div>
<script type="text/javascript">
$('#radio').buttonset();
</script>
The id of the input tag must be correctly referenced by the label's for attribute. If the webpage is inside a master page then the id of the input tag will be modified to something like ctl00_Something_radio1, and suddenly the label's for attribute no longer references the input tag. Beware of this in ASP.NET!

How can I use HTML5 email input type with server-side .NET

As I understand it, the <input type=email> element in HTML5 will render as a simple text field in browsers that do not support the tag. On other browsers it will render properly, like on the iPhone it will bring up the e-mail keyboard layout.
I’d like to use this in a project but my input fields are <asp:TextBox> controls. How can I use the HTML5 element but still access its data server-side like the rest of my fields?
There is an update for .NET framework 4 which allows you to specify the type attribute
http://support.microsoft.com/kb/2468871.
See feature 3 way down the page
Feature 3
New syntax lets you define a
TextBox control that is HTML5
compatible. For example, the following
code defines a TextBox control that is
HTML5 compatible:
<asp:TextBox runat="server" type="some-HTML5-type" />
you can try adding the attributes manually, like:
TextBox1.Attributes["type"] = "email";
TextBox1.Attributes["type"] = "url";
TextBox1.Attributes["type"] = "number";
Sorry I'm a bit late to the party, though I think that others can benefit from what I did. I have a page which is HTML 5 though we still have .NET 3.5. We wanted to keep the .NET element, though have the type change to email. I've tried several methods (including Milox above) to no avail, though the one which worked for me was the following: I added a JavaScript property to the element itself inline (when I put it in a script tag it wouldn't pick up for some reason...)
Here is what your tag would look like if you use my changes:
<asp:TextBox runat="server" type="email" onfocus="this.type='email'"/>
Eli
Whether or not it is accessible as a server control, you should be able to access the HttpRequest.Form collection and retrieve the value. No matter what the browser does with the tag, it has to submit a string to the server.
in your .aspx file add
<input type="text" required autofocus placeholder="Email Address"
class="txt-input txt-input-username" ID="myTextBox" runat="server"/>
in your Code Behind .cs
myTextBox.Attributes["type"] = "email";
This Worked For Me
You need to create your own custom control and override the Render routines. Feel free to use either the source code or DLLs

image submit button passing value

I have one image submit button like this
<input id="enter" name="enter" type="image"
value="Login"
src="images/btn_login.jpg"/>
once i click on this image i got following values
enter.x=39&enter.y=11
but i want to get enter=Login on submit
how to get enter value as login on submit?
Thanks
Some Quick browser tests
Chrome: Working
Safari: Working
Firefox: Working
IE: Not Working
Opera: Not working
Working means enter=login is passed. All browsers are at latest version at the time of writing
IE6 and IE7 definitely don't pass through the value of an image submit, so you can't use this method if you want your page to work in those browsers. However I'm surprised that you say the latest version of IE doesn't work, I thought it did
The only reliable fallback I've found is to overload the name attribute:
<input id="enter" name="enter.login" type="image"
value="Login"
src="images/btn_login.jpg"/>
Then, you have to iterate through all the form params and look for one whose name starts with 'enter'. Note that your input still needs to have a value attribute of some kind, otherwise browsers won't pass it through at all.
Alternatively you can use a normal submit button with a background image - tricky to get consistently styled, or a <button> - although that has even more issues in IE than an image submit :(
You can use a small javascript for this that passes the right value to a hidden input field on clicking the image and submit the form.
Example:
<script>
function submitimg(myvalue)
{
document.getElementById('enter').value = myvalue;
document.getElementById('myform').submit();
}
</script>
<form id="myform">
<input type="hidden" name="enter" value="">
<img src="images/btn_login.jpg" style="cursor:pointer;" onclick="submitimg('Login');">
</form>

Resources