Develop Reference

Html input type date losing value on onfocusout

I have this input type="date":
<input class="form-control" data-val="true" data-val-required="Mandatory field" id="MyInput" name="MyInput" onblur="if(this.value==''){this.type='text'}" onfocus="(this.type='date')" type="text" value="01/05/2022">
it works fine, but I dont know why it looses the value on focusout. How can I fix this? It shouldn't loose the value on focusout.

Start with type=date and set the value like so. I guess it cant convert the initial text to a date when you switch the type since its not in the correct format. It expects a date like this YYYY-MM-DD however you provide 01-05-2022 -> MM-DD-YYYY. I assume thats why the value is lost.
<input class="form-control" data-val="true" data-val-required="Mandatory field" id="MyInput" name="MyInput" onblur="if(this.value==''){this.type='text'}" onfocus="(this.type='date')" type="date" value="2022-01-05">

readonly field appearing automatically when i open in mobile view

<input class="form-control" type="text" name="name" required="" placeholder="Name" style="width:100%" readonly="">
.form-control[disabled], .form-control[readonly], fieldset[disabled]
this is showing when I open developer tools
please help me with that
I tried to remove that from CSS file but that linking automatically

I don't clearly understand what you're asking for, because your input will be displayed in all cases, readonly is only there to prevent writing.

How to handle different input types bound to same ng-model?

In a page, I have a section for date-range selection. A large portion of our user base is IE 10/11, which does not support input type="date". I'm using Modernizr to show/hide the date input based on the support, and when not, provide an input of type="text", both bound to the same ng-model. Typing into the text spams the console with errors, as the text and date are incompatible. Is there a way to fix this console spam? Using a third-party library is not an option.
<div class="col-md-3" data-ng-show="searchBillCreatedDate == 'custom'">
<label>From</label>
<input data-ng-model="searchFromDate" type="date" class="form-control" data-ng-show="browser.supportsDateInput">
<input data-ng-model="searchFromDate" type="text" class="form-control" data-ng-show="!browser.supportsDateInput" placeholder="yyyy-mm-dd">
</div>

Change your ng-show to ng-if like this:
<input data-ng-model="searchFromDate" type="date" class="form-control" data-ng-if="browser.supportsDateInput">
<input data-ng-model="searchFromDate" type="text" class="form-control" data-ng-if="!browser.supportsDateInput" placeholder="yyyy-mm-dd">
You're getting the error because it's binding to the the first input's model, which is a date input. ng-show just uses CSS to hide the element but it still exists in the DOM. ng-if, however, completely removes it from the DOM, leaving you with one ng-model="searchFromDate"

Protractor custom directive element is not currently visible in Firefox

I'm trying to insert into input by using Protractor for testing. My input tag has a custom directive obtained from materializecss which is basically a datepicker (http://materializecss.com/forms.html#date-picker).
My HTML:
<div class="input-field">
<input name="dob" id="dob" input-date select-years="75" format="dd-mm-yyyy" changeformat data-ng-model="editProfile.patientProfile.dobToDisplay" data-ng-required="!editProfile.patientProfile.dobToDisplay" type="text" placeholder="(DOB)DD-MM-YYYY" class="colors" " />
<label for="dob" class="active ">(DOB)<span class="hide-on-small-only">DD-MM-YYYY</span></label>
<span class="materialize-red-text" ng-if="patProForm.$submitted && patProForm.dob.$invalid">Date of birth is invalid!</span>
</div>
I have tried following commands but could not succeed:
element(by.model('editProfile.patientProfile.dobToDisplay')).sendKeys('04-01-2016');
I tried removing attribute:
var remove_inputDate = element(by.name("rptdate"));
browser.executeScript('arguments[0].removeAttribute("input-date");', remove_inputDate.getWebElement());
and tried pushing data into ng-model
element(by.model('editProfile.patientProfile.dobToDisplay')).sendKeys('04-01-2016');
but it did not work,
var remove_inputDate = element(by.name("rptdate"));
browser.executeScript('arguments[0].removeAttribute("input-date");', remove_inputDate.getWebElement());
and tried pushing data into ng-model
element(by.model('editProfile.patientProfile.dobToDisplay')).sendKeys('04-01-2016');
but it did not work.
By using Chrome, it says element is not stable and through Firefox element is not visible.
Is this the correct way of inserting data?

How do you disable input value on web form field / input tag?

How do you disable the autocomplete functionality in the major browsers for a specific input (or form field)?
<input type="text" id="fullname" name="fullname" class="form-control" data-required="true" value="<?php echo $_POST['fullname']?>" >
When I open this form I see the value in this input even if I didn't insert any value.

I think adding autocomplete="off" would get you an error on most browsers, furthermore, autocomplete="off" is an invalid property.
Try to check the Mozilla Developer Documentation instead.

Just use the autocomplete attribute:
<input type="text" autocomplete="off"/>
"This would be useful when a text input is one-off and unique. Like a
CAPTCHA input, one-time use codes, or for when you have built your own
auto-suggest/auto-complete feature and need to turn off the browser
default."
Source : CSS Tricks

You could generate a random string using javasript or php and add it to the end of an input name, maybe even use a delimiter to split it apart from the actual name.
In php, you could use something like the session_id for this and simply echo it to the end of the name.
<input type="text" autocomplete="off" name="example<?php echo "," . session_id()?>">
You can replace the "," with any delimiter of your choice, so long as it isn't alphanumeric. Then when processing the data submitted, you can remove it from the end of the actual name of the input field.
With a field name always being different, your browser cant autocomplete it.
Source: https://stackoverflow.com/a/218453/12251360

Solution 1
<form name="form1" id="form1" method="post"
autocomplete="off" action="http://www.example.com/form.cgi">
This will work in Internet Explorer and Mozilla FireFox, the downside is that it is not XHTML standard.
Solution 2
The solution for Chrome is to add autocomplete="new-password" to the input type password.
Example:
<form name="myForm"" method="post">
<input name="user" type="text" />
<input name="pass" type="password" autocomplete="new-password" />
<input type="submit">
</form>
Chrome always autocomplete the data if it finds a box of type password, just enough to indicate for that box autocomplete = "new-password".
This works well for me.
Note: make sure with F12 that your changes take effect, many times browsers save the page in cache, this gave me a bad impression that it did not work, but the browser did not actually bring the changes.
Solution 3
<input type="text" id="fullname" name="fullname" autocomplete="off" class="form-control" data-required="true" value="<?php echo $_POST['fullname']?>" >
links
Solution 3 Reference : https://stackoverflow.com/a/25496311/6923146
Solution 2 Reference : https://stackoverflow.com/a/40791726/6923146