How to set autofill for username in reactjs? - javascript

I have a piece of code that will not, for the life of me, set autofill for the username. It will autofill the password for some reason. Im hoping someone will know a short easy solution. I know there is but ive tried "username" and "email" for the field and nothing pops up. The "admin#dw.com" (made up email for testing purposes) wont fill the email field... Thank you in advance! I have attached short code and an image below:
<Input
type="email"
id="email"
autocomplete
value={Email}
onChange={(text) => setEmail(text.target.value)}
placeholder="Ex: JohnSmith#gmail.com"
/>

here are two solutions:
1) get rid of value in your input and use placeholder or
2) comment out placeholder and use the js
var input = document.getElementsByTagName('input');
//input[0].value ="john#abc.com";
<Input
type="email"
id="email"
placeholder="johny#anc.com"
/>

Related

Email address is auto suggested in first name field

Saved email address is auto suggested in "First name" field of "Sign Up" form. When I click the first name field, saved email address is coming below the first name field for selection. I have searched and found that if we include a fake firstname field with 'display:none' before the original first name field the issue will be resolved. But it doesn't work for me.
Thanks in advance for your help.
As per your question I have understood that you don't want email auto suggested you want name over there...
I would suggest to check type for the input field...
<input type="text" name="fname">
else I would have failed to understand you...
Use autocomplete="off" attribute to text box.
Ex: <input type="email" autocomplete="off" />

using 2 inputs or change type of input to show password

I want to add a show password checkbox to my form.
When a user checks that checkbox password is shown.
Most of the examples that I found are using 2 inputs, one with type="text" and the other with type="password". And switch between these inputs according to the status of the checkbox.
it is simpler to change type of input to type="text", so why people use 2 inputs?
Be careful with using type="text" as a way of showing the password, as it exposes the user to saving the password in plain text in their autocomplete settings. I think the two input box approach is probably safer as you can stop the text one from being picked up by autocomplete by using autocomplete="off"
See this artcile describing the vulnerability: https://www.foxtonforensics.com/blog/post/uncovering-plain-text-passwords-in-internet-history
probably to make it work on old versions of IE, since IE 9 and below, do not allow dynamic change of type="password" to type="text". it throws an error "Could not get the type property"
I hope ur trying to ask that u want single password input field and show password button...Below is my answer
<input type="password" name="passwd" id="txtPassword" placeholder="Password" required="required">
<input type="checkbox" id="showhide"/>
<label for="showhide" id="showhidelabel">Show Password</label>
<script type="text/javascript">
$(document).ready(function () {
$("#showhide").click(function () {
if ($("#txtPassword").attr("type")=="password") {
$("#txtPassword").attr("type", "text");
}
else{
$("#txtPassword").attr("type", "password");
}
});
});

Chrome email field autocomplete options not showing for my website

As I visit many new websites for the first time, I see that:
For some websites, putting my cursor in the email field of signup form immediately shows me email options from what I had entered in other websites.
For other websites, putting my cursor in the email field does not give me any email options. And, I have to manually type every letter of the email.
I couldn't find what piece of code differentiates the two cases. For my website, I am stuck with #2. I am trying to achieve #1, where user can just re-use emails entered in other websites.
I used some code like this:
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required autocomplete="email">
It seems that you want to enable autocomplete, but you have specified the wrong attribute.
SYNTAX:
Autocomplete="on | off"
In order to save the email address entered for the first time though, you need to have a form tag with the attribute method="POST" on it. It is also recommended to use the autocompletetype attribute to help the browsers populate the forms more accurately.
NOTE: In some cases on older browsers you may also need to add an action if the form doesn't have one. action="javascript:void(0)" works.
An example with autocomplete on and method="POST":
<form method="POST" action="javascript:void(0)">
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required autocomplete="on" autocompletetype=”email”>
<input type="submit">
</form>
An example without autocomplete and method="POST":
<form>
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required autocomplete="off">
<input type="submit">
</form>
See also How to trigger Autofill in Google Chrome?
Difference is in autocomplete attribute of input element.
Syntax : <input autocomplete="">
It allows the browser to automatically filled the input field based on the previously filled data.
Hence, In #1 value of autocomplete attribute should be on.
DEMO
E-mail: <input type="email" name="email" autocomplete="on">
In #2 value of autocomplete attribute should be off.
DEMO
E-mail: <input type="email" name="email" autocomplete="off">
The answers so far are wrong/outdated or incomplete.
Using autocomplete="email" is perfectly valid. But the browsers do not handle it very well at the moment. In Firefox and Chrome, only the name attribute is used for autocompletion. So you should stick with name="email".
If the Chrome user really wants to have a proper autocompletion for every type that autocomplete supports, he/she has to fill out the Autofill settings. After these settings are filled, the autocompletion does not depend on the name attribute anymore, but uses the type of autocomplete. I.E. it will suggest the user's email address for fields with autocomplete="email".
So in order to have the best browser support, you should keep <input name="email" autocomplete="email" [...]>. As soon as there has been at least one submitted form with name="email" or prefilled Autofill settings, the browser should actually autocomplete your input field.
Further Resources:
caniuse: autocomplete attribute: on & off values
caniuse: input[autocomplete] (values besides on/off)
For some websites, putting my cursor in the email field of signup form immediately shows me email options from what I had entered in other websites.
I cannot reproduce that on the latest Chrome on Mac OS X. You actually have to doubleclick the input for the autocompletion to show up.
The correct values for the autocomplete attribute is "on" or "off" as you can see at : https://www.w3schools.com/Tags/att_input_autocomplete.asp
Use autocomplete="on" in form tag. like below.
<form action="" method="post" autocomplete="on">
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required>
<input type="submit" value="Submit">
</form>

Need a field description inside an input field without sending it

I have a contact form and I want the descriptions of the fields inside the input field. If I add the description by "value" I got the problem that this value will be send and an other problem is that this value will not be hide if I click inside the input field.
Is there any easy solution?
Thats the simple input field I talking about: jsfiddle.net/gefxo2s3/
<input type="email" name="email" id="email" class="textinput" value="Your E-Mail">
The HTML5 placeholder attribute
<input type="email" name="email" placeholder="Your Email">
is what you are looking for. Works in most browsers [browser support stats], but there are polyfills for those browsers that don't support it. I suggest this one

javascript text field focus disable block

I want to make two text field as follows
<input id="email" class="email" value = "${user.email}" />
<input id="password" class="password" display="none" />
I'd like to change my email with current password. So I want to make password text field (its default display is none) to be activated, when I try to type in email text field to change email address.
To to this, I use javascript code. How can I make a code for this?
Should I use focus() or live() for this? Please let me know.
Thanks
try
$('#email').keyup(function() {
$('#password').show();
}

Categories

Resources