Develop Reference

Adjusting dynamic input fields when changing the type of the input field

I have a little challenge when testing a website. Just wanted to see if you folks have any suggestions on this. The story behind this is that I need to mask the input fields for the screenshots when the test has been executed as we are sharing the data with other teams. Before the script I am running JS with 'document***.type="password";', but when script starts to type, then input type is changed back to the type of text. Also, class changes from class="is-invalid" to class="is-focused is-invalid" when it's active. Also, I could of course change the type after I have typed the value, but even tho when I click the next field, the class changes. When I have filled the first input field it checks the data against the server and the class is of course changed.
I have an input field when inactive:
<input ref="input" value="input field" id="id-for-unified-text-input--14fe" name="unified-text-input-14fe" type="text" autocomplete="off" spellcheck="false" placeholder="ABC123" class="is-invalid">
And the input field when active"
<input ref="input" value="input field" id="id-for-unified-text-input--14fe" name="unified-text-input-14fe" type="text" autocomplete="off" spellcheck="false" placeholder="ABC123" class="is-focused is-invalid">
Any suggestions from a fellow testers, how could I fix this? Thanks a lot in advance!

As pretty much evident from the HTML the <input> field whenever recieves the focus_ the classname is-focused added.
This addition of classname is pretty much controled through the attributes, presumably the css_properties of the parent elements.
As as conclusion, it would be difficult to mask the password field characters from the clientside and have to be controled from the Application Server side.

Is there any plugin to add to every input of a form an autocomplete attribute

I recently found out that Google is keen about users autofilling their forms. So keen that with the last update its browser Chrome fires a warning if the autocomplete attribute is missing or wrongly coded:
[DOM] Input elements should have autocomplete attributes (suggested: "current-password"): (More info: https://www.chromium.org/developers/design-documents/create-amazing-password-forms) <input class=​"input-text" type=​"password" name=​"password" id=​"password">​
I have searched around but i could only find how to "turn it off".
Since I find it very useful (agreeing with Google), I would like to know if there are libraries out there to automatically add the attributes accordingly.
so that:
<form>
<input name="name" type="text" id="name">
</form>
becomes
<form>
<input name="name" type="text" id="name" autocomplete="name">
</form>
taking the value from its 'name' attribute or 'id'.
More info on this: https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont/

Google Chrome autocomplete not working

I get the autocomplete suggestions when I type, but when I select the value it doesn't populate the field.
Here is a GIF to illustrate the issue.
https://media.giphy.com/media/lzwkRcCKiLafkRcjEE/giphy.gif
Here is another example of it working, then stopping to work:
HTML
<input type="text" name="last-name" autocomplete="last-name" value="MacIsaac">
The form is built with React

According to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete, autocomplete="family-name" should autocomplete to the last name.
So the end result should be: <input type="text" name="last-name" autocomplete="family-name" value="MacIsaac">

Ensure your inputs are wrapped in a form element and autocomplete will work.

Disable entire form elements with respect to a state. React

I am disabling the inputs using the isFetching prop,
but this is getting reduntant as I have to keep this in every input field.
Is there a way to disable the entire form?
Like a disable property in <form> tag or something?
<form>
<input type="text" disabled={this.props.isFetching} />
<input type="text" disabled={this.props.isFetching} />
</form>

I think this should solve your problem https://stackoverflow.com/a/17186342/3298693.
You should insert your form inside an element <fieldset disabled="disabled">. This will make the whole form disabled.

I had the same issue and this worked for me:
<fieldset disabled={true}>
Where true would be some "prop.setting"...

Just use <input type="text" disabled> wherever you want the input text to be disabled. It hardly takes some time.

Submitting the value of a disabled input field

I want to disable an input field, but when I submit the form it should still pass the value.
Use case: I am trying to get latitude and longitude from Google Maps and wanna display it, but I don't want the user to edit it.
Is this possible?

I wanna Disable an Input Field on a
form and when i submit the form the
values from the disabled form is not
submitted.
Use Case: i am trying to get Lat Lng
from Google Map and wanna Display it..
but dont want the user to edit it.
You can use the readonly property in your input field
<input type="text" readonly="readonly" />

I know this is old but I just ran into this problem and none of the answers are suitable. nickf's solution works but it requires javascript. The best way is to disable the field and still pass the value is to use a hidden input field to pass the value to the form. For example,
<input type="text" value="22.2222" disabled="disabled" />
<input type="hidden" name="lat" value="22.2222" />
This way the value is passed but the user sees the greyed out field. The readonly attribute does not gray it out.

you can also use the Readonly attribute: the input is not gonna be grayed but it won't be editable
<input type="text" name="lat" value="22.2222" readonly="readonly" />

Input elements have a property called disabled. When the form submits, just run some code like this:
var myInput = document.getElementById('myInput');
myInput.disabled = true;