Is it possible to selectively disable the autofill feature in text fields using code?
I'm developing my custom code in ASP.Net AJAX to search for the suggestion in the database and I would like to prevent the browser suggestions from appearing when the user starts typing in the textbox.
I'm looking for a solution that works in the most modern browsers (IE 7 & 8, Firefox, Safari and Chrome). It's is ok if the workaround is in Javascript.
Look at the autocomplete HTML attribute (on form or input tags).
<form [...] autocomplete="off"> [...] </form>
W3C > Autocomplete attribute
Edit:
Nowadays - from the comments - web browsers do not always respect the autocomplete tag defined behavior. This non-respect could be surrounded with a little of JavaScript code but you should think about you want to do before use this.
First, fields will be filled during the page loading and will only be emptied once the page load. Users will question why the field has been emptied.
Second, this will reset other web browser mechanisms, like the autofill of a field when you go back to the previous page.
jQuery( function()
{
$("input[autocomplete=off]").val( "" );
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" value="John" autocomplete="off">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" value="qwerty" autocomplete="off">
</div>
<input type="submit" value="Login">
</form>
you can put it into your inputs:
<input type="text" name="off" autocomplete="off">
or in jquery
$(":input").attr("autocomplete","off");
There are 2 solutions for this problem. I have tested following code on Google Chrome v36.
Recent Version of Google Chrome forces Autofill irrespective of the Autocomplete=off.Some of the previous hacks don't work anymore (34+ versions)
Solution 1:
Put following code under under <form ..> tag.
<form id="form1" runat="server" >
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>
...
Read more
Solution 2:
$('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);
});
It removes "name" and "id" attributes from elements and assigns them back after 1ms.
Adding an autocomplete=off attribute to the html input element should do that.
Add the AutoCompleteType="Disabled" to your textbox
This should work in every browser
<script type="text/javascript">
var c = document.getElementById("<%=TextBox1.ClientID %>");
c.select =
function (event, ui)
{ this.value = ""; return false; }
</script>
My workaround is to make the password field a normal textbox, then using jquery to turn it into password field on focus:
<asp:TextBox runat="server" ID="txtUsername" />
<asp:TextBox runat="server" ID="txtPassword" />
<script>
$("#txtPassword").focus(function () {
$("#txtPassword").prop('type', 'password');
});
</script>
I have successfully tested this in Edge and Firefox.
<input type="text" id="cc" name="cc" autocomplete="off">
works for regular text input.
For passwords, you need to use autocomplete="new-password"
<input type="password" id="cc1" name="cc" autocomplete="new-password">
per Mozilla Development Network
Place below code above your username control. This will work in call the browser.
<div style="margin-left:-99999px; height:0px;width:0px;">
<input type="text" id="cc" name="cc" autocomplete="off">
<input type="password" id="cc1" name="cc" autocomplete="off">
</div>
Related
In a frontend new custom post creation form, I'm trying to replace a normal input type file with dropzone, but it doesn't upload the images to the server.
I have created a new div for dropping the files, and I have wrapped the previous input as a fallback inside my form:
<form id="new_post" name="new_post" method="post" action="#" class="dropzone" enctype="multipart/form-data">
<!-- other form fields here -->
<div class="dropzone-previews"></div>
<div class="fallback">
<input type="file" name="file[]" multiple="multiple" />
</div>
<input type="hidden" id="new_cpt_action" name="new_cpt_action" value="new_cpt" />
<input type="submit" value="submit" id="submit" name="submit" />
</form>
To make dropzone work with the code above, I have the following options in my script:
$(document).ready(function () {
Dropzone.autoDiscover = false;
$("#new_post").dropzone({
uploadMultiple: true,
addRemoveLinks: true,
previewsContainer: ".dropzone-previews",
});
});
When I click the submit button, the creation of the new post is triggered and everything works as expected, but the images are not uploaded and attached. The input type="file" works perfectly, but dropzone doesn't.
If the server is able to handle the files with a normal input, does anyone know I am missing on the dropzone option?
Many thanks!
Is there a way to style the "popup" when a field is invalid in AngularJS?
I have no idea WHERE this thing is styled? We also have Bootstrap loaded, not sure if it's there. Can't right-click to "find element" either.
That's the browser validation kicking in. Disable it as follows:
<form novalidate></form>
Edit: Example of a form using novalidate with AngularJS's validation:
<form name="form" class="css-form" novalidate>
Name:
<input type="text" ng-model="user.name" name="uName" required /><br />
E-mail:
<input type="email" ng-model="user.email" name="uEmail" required/><br />
<div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
<span ng-show="form.uEmail.$error.required">Tell us your email.</span>
<span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
</div>
</form>
I believe it is no longer possible to style these popups:
Link
I have a form with some text fields,and I want to place the cursor (auto focus) on first text field of form when page gets loaded.
I want to do it without using javascript.
Ya its possible to do without support of javascript..
We can use html5 auto focus attribute
For Example:
<input type="text" name="name" autofocus="autofocus" id="xax" />
If use it (autofocus="autofocus") in text field means that text field get focused when page gets loaded..
For more details:
http://www.hscripts.com/tutorials/html5/autofocus-attribute.html
Just add autofocus in first input or textarea.
<input type="text" name="name" id="xax" autofocus="autofocus" />
This will work:
OnLoad="document.myform.mytextfield.focus();"
<body onLoad="self.focus();document.formname.name.focus()" >
formname is <form action="xxx.php" method="POST" name="formname" >
and name is <input type="text" tabindex="1" name="name" />
it works for me, checked using IE and mozilla.
autofocus, somehow didn't work for me.
An expansion for those who did a bit of fiddling around like I did.
The following work (from W3):
<input type="text" autofocus />
<input type="text" autofocus="" />
<input type="text" autofocus="autofocus" />
<input type="text" autofocus="AuToFoCuS" />
It is important to note that this does not work in CSS though. I.e. you can't use:
.first-input {
autofocus:"autofocus"
}
At least it didn't work for me...
very easy you can just set the attribute autofocus to on in the wanted input
<form action="exemple.php" method="post">
<input name="wantedInput" autofocus="on">
<input type="submit" value="go" >
</form>
Sometimes all you have to do to make sure the cursor is inside the text box is:
click on the text box and when a menu is displayed, click on "Format text box"
then click on the "text box" tab and finally modify all four margins (left, right, upper and bottom) by arrowing down until "0" appear on each margin.
I am not a skilled programmer and I am building a site using a third party's CMS. I have created a <form> in order to gather information and send it to an external site. My code doesn't work. The reason I am told is that the site is built on ASP.NET and as the 'master'page already has a <form> element in it and <form> elements cannot be embedded inside one another; so what I've written will never work. I have been advised to look for a java based solution, but I'm at a loss.
My present code is pretty basic...
<form action="http://ExternalWebSite.com" method="post" id="subForm">
<label for="name">Name:</label><br /><input type="text" name="name" id="name" /><br />
<label for="Email">Email Address:</label><br /><input type="text" name="email" id="email" /><br />
<label for="Dog name">Your dog's name:</label><br /><input type="text" name="dogname" id="dogname" /><br />
<label for="Town where you live">Town where you live:</label><br /><input type="text" name="town" id="town" /><br />
<input type="submit" value="Subscribe" />
</form>
How can I make this execute without using the tag inside my html code?
ASP.NET web forms adds one <form runat="server"> in your application. Therefore, you can't nest forms, but you can get multiple forms through a hack, mentioned here.
You can make an ajax call (post in this case) too to that url
$.ajax({
type: "POST",
url: "http://ExternalWebSite.com",
data: { name: $("#name").val(), $("#email").val(), $("#dogname").val(), $("#town").val() },
success: function(result){
//here you handle what to do after the post
}
});
For further reference on how to use jquery go to: This link The most imortant here is the ajax called which is foinf to make a post the specified utl sending the named parameters,the success function which will receive anything you write on the response on the url you are calling, and the selectors $("#name").val() which means "give me the value of the element with the id name"
I have an aspx page with many buttons and i have a search button whose event i want to be triggered when user press enter.
How can i do this?
You set the forms default button:
<form id="Form1"
defaultbutton="SubmitButton"
runat="server">
Make it the default button of the form or panel.
Either one has a DefaultButton property that you can set to the wanted button.
$(document).ready(function() {
$("#yourtextbox").keypress(function(e) {
setEnterValue(e);
});
});
function setEnterValue( e) {
var key = checkBrowser(e);
if (key == 13) {
//call your post method
}
function checkBrowser(e) {
if (window.event)
key = window.event.keyCode; //IE
else
key = e.which; //firefox
return key;}
call the above function and it will help you in detecting the enter key and
than call your post method.
The best way to make from make actions using enter button and on click of the button without the headache to write js check for each input you have if the user press enter or not is using submit input type.
But you would face the problem that onsubmit wouldn't work with asp.net.
I solved it with very easy way.
if we have such a form
<form method="post" name="setting-form" >
<input type="text" id="UserName" name="UserName" value=""
placeholder="user name" >
<input type="password" id="Password" name="password" value="" placeholder="password" >
<div id="remember" class="checkbox">
<label>remember me</label>
<asp:CheckBox ID="RememberMe" runat="server" />
</div>
<input type="submit" value="login" id="login-btn"/>
</form>
You can now catch get that event before the form postback and stop it from postback and do all the ajax you want using this jquery.
$(document).ready(function () {
$("#login-btn").click(function (event) {
event.preventDefault();
alert("do what ever you want");
});
});