Develop Reference

How to set autofill for username in reactjs?

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"
/>

Changing input method on the fly

I have a simple form on laravel which will take name and email only and submit it to database. Name will be in Japanese. I can validate it in controller.
However, when I am using chrome; after inserting the name in Japanese; I press TAB key and input method automatically changes when cursor is on the email field.
But when I am using edge the input method doesn't change automatically. I have to manually change it.
Is there any way to automatically change input method on the fly regardless of the browser? Is there any JS function and/or Laravel function that I can use?

I solved the problem. The trick is using css.
In the fields I need English input, I put ime-mode inactive and type = tel.
In the fields I need Japanese input, I put ime-mode active.
It worked. my code was something like this.
<input type="text" name="number" placeholder="enter your name" style="ime-mode: active;">
<input type="tel" name="email" placeholder="enter your email" style="ime-mode: inactive;">

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");
}
});
});

Copy input field from one to another?

UPDATE: I got in contact with the developer and he said to use this code as a foundation:
(function($) {
$('.jr-page').on('keyup','.jrAutoSuggest',function(){
$(".customfield").val($(this).val());
});
})(jQuery);
It doesn't work at the moment and I'm not sure why but you can also see my original post below this text for more details and I appreciate all of your help:
I am trying to copy one input field to another when a user types. I would like to accomplish something like this: http://jsfiddle.net/bxHQ5/ Notice that when you type into the input box on the left, it duplicates the text on the right.
To be more specific, on my website, I am using this form
I want what the user types in the "Car Manufacturer" input box to directly be copied to the "Testfield" input box as they type. Also, the "Testfield" input box text cannot be deleted or altered by the user once text is inputted in the car manufacturer field. They both have to be exactly the same.
Please note that the car manufacturer input field shows a hidden input which the user cannot see and should be ignored in this case. If you look at the HTML, the car manufacturer input looks like this:
<input id="myrelatedfield" class="jrAutoSuggest ui-autocomplete-input acInstructions" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"></input>
You'll notice I put my own customer ID in there called "myrelatedfield" The field it needs to copy text to looks like this which has a custom class "jr_testfield"...
<input class="jr_testfield jrText" type="text" data-click2add="0" name="data[Field][Listing][jr_testfield]"></input>
Thanks!

I ave updated the code
have a look at it
http://jsfiddle.net/vishalgupta358/bxHQ5/383/
$("#EmailAddress").keyup(function(){
$("#Username").val($(this).val());
});

Use readonly="true" property to prevent write access.Input value will also be available when u submit the form
HTML:
<input type="text"id="EmailAddress" name="EmailAddress" value="" >
<input type="text" id="Username" readonly="true" name="Username" value="">
Script:
$("#EmailAddress").keyup(function(){
$("#Username").val($(this).val());
});
DEMO

"Show password as text" control

I have a usual login form consisting of two input fields, one for login, one for password. I am currently trying to add a control that will show entered password as plain text, so user can check it for typos.
The problem is that browsers (at least Firefox) do not allow dynamic changing of type attribute of input fields, so I cannot just change type="password" to type="text". Another problem is that browsers do not allow to get value of password field, so I can't create a new input type="text" and set its value to the password's one. I've seen several different approaches to this task, including this one, but they are working only if the password is typed and fail when browser autofills the password.
So, any suggestions to do this are welcome. I am using jQuery.

You can do something like this:
<input type="password" id="password">
<input type="checkbox" onchange="document.getElementById('password').type = this.checked ? 'text' : 'password'"> Show password

If I may, I don't think it's a great idea to show the password in text, for the following reasons:
It's not commonly done, so it will be confusing to the user
It means you are open to over-the-shoulder viewing of the password
I also think, if you just want to help users avoid typos, give them more chances before the password is disabled. I think the typical "3" that most sites implement is not really required, I'd suggest "10" attempts, or perhaps "5", if you wish to be really conservative, is quite acceptable. Just count it down for them, and let them resolve typos on their own.
Just my humble opinion.

I have never tried this myself but can't you just access the value property of the element?
if you have something like...
<input id="pw" name="pw" type="password" />
Then in JavaScript / jQuery...
var pass = document.getElementById('pw').value;
$('pw').val()

There is no any possibility to show autofilled password for security reasons. Anyone could see your password on your computer for this page if this is possible.
You have to deal with following for complete solution:
javascript is not allowed - then you should not display choose password checkbox
autocomplete is turned on - as I wrote, you're not able to show password filled this way. Eaighter switch off autocomplete or hide show password until user re-type password.
Autocomplete switch off by this jQuery
$('input').attr('autocomplete', 'off');
For adding checkbox on the fly you can use following jquery-showPassword plugin available at http://www.cuptech.eu/jquery-plugins/

$('.show-password').change(function() {
if ($("#form-fields_show-password").attr('checked')) {
var showValue = $('#form-fields_password').val();
var showPassword = $('<input type="text" size="50" required="required" name="form- fields[password]" id="form-fields_password" class="password required" value="'+showValue+'">');
$('#form-fields_password').replaceWith(showPassword);
} else {
var hideValue = $('#form-fields_password').val();
var hidePassword = $('<input type="password" size="50" required="required" name="form-fields[password]" id="form-fields_password" class="password required" value="'+hideValue+'">');
$('#form-fields_password').replaceWith(hidePassword);
}
});
Something like this will find the input area, and store the value in a variable called showValue. Then you can replace the element with type="password", with new html where type="text" and if the checkbox is unchecked the value will be dropped into password type field.
There is a problem with this method in that the password type value will be visible in the code, however to get round this you can always remove the value attribute from the password type and just force the user to re-type. If you can live with that in you application.

function change(){
id.type="password";
}
<input type="text" value="123456" id="change">
<button onclick="pass()">Change to pass</button>
<button onclick="text()">Change to text</button>
<script>function pass(){document.getElementById('change').type="password";} function text(){document.getElementById('change').type="text"; } </script>

Password: <input type="password" value="" id="myInput"><br><br>
<input type="checkbox" onclick="myFunction()">Show Password
<script>
function myFunction() {
var x = document.getElementById("myInput");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>