I have used angular material to make login form. The text input field works properly, but the password field doesn't render properly in Internet Explorer 11.
Screenshot:
enter image description here
Here is the code:
<mat-form-field class="feild-full-width" color="primary">
<input matInput type="text" placeholder="Username"
autocomplete="off" />
</mat-form-field>
<mat-form-field class="feild-full-width" color="primary">
<input matInput placeholder="Password" autocomplete="off" [type]="texttype ? 'password' : 'text'" />
<mat-icon matSuffix (click)="texttype = !texttype">{{texttype ? 'visibility_off' : 'visibility'}}</mat-icon>
</mat-form-field>
How to fix it?
Related
I have two input fields.
HTML:
<mat-form-field class="example-form-field" >
<input matInput type="text" placeholder="First Name" name = "user_first_name" [(ngModel)]="user_first_name" required>
<button mat-button *ngIf="user_first_name" matSuffix mat-icon-button aria-label="Clear" (click)="user_first_name=''">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
<mat-form-field class="example-form-field">
<input matInput type="text" placeholder="Last Name" name = "user_last_name" [(ngModel)]="user_last_name" required>
<button mat-button *ngIf="user_last_name" matSuffix mat-icon-button aria-label="Clear" (click)="user_last_name=''">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
Here is my requirements for input validation.
if the user enters anything starts with these "#!#$%^7*().,;:'"'/?=-+][{}\|" I want to display a message like Please enter valid data.
If the user is not entering anything in inputs I want to display like "First Name is required".
How can I achieve this.
what is the code to disable an INPUT text box for HTML?
Thanks
<input type="text" disabled="disabled" />
See the W3C HTML Specification on the input tag for more information.
<input type="text" required="true" value="" readonly="true">
This will make a text box in readonly mode, might be helpful in generating passwords and datepickers.
The syntax to disable an HTML input is as follows:
<input type="text" id="input_id" DISABLED />
You can Use both disabled or readonly attribute of input . Using disable attribute will omit that value at form submit, so if you want that values at submit event make them readonly instead of disable.
<input type="text" readonly>
or
<input type="text" disabled>
<input type="text" required="true" value="" readonly>
Not the.
<input type="text" required="true" value="" readonly="true">
The other two answers on this question propose overriding
div.ui-input-text {}
However, I have multiple input fields on this page and also within my project. So those answers won't work as they would effect everything on my page or project.
How can I modify a single text input?
A class designation in the input tag doesn't work. If I encapsulate the input with a div tag it still doesn't work. I'm trying to put an icon at the end but it seems all Jquery mobile text input takes the entire screen.
<input class="address" type="text" name="address" id="basic"
placeholder="Street Address, City, State" />
<input type="button" value="FindMe" data-icon="eye" data-iconpos="notext">
CSS, No Effect!
.address {
width: 200px !important;
}
Now, I could still switch to Bootstrap if that's the better way to go on this project. It seems to have .col-xs-* classes that solve this problem.
Thanks in advance.
Instead of directly setting the class on the input,jQM provides a data-attribute for inputs called data-wrapper-class (api doc: http://api.jquerymobile.com/textinput/#option-wrapperClass). This allows you to apply a class directly to the outermost wrapping DIV that jQM adds when enhancing the textbox.
<input data-wrapper-class="address" type="text" name="address" id="basic"
placeholder="Street Address, City, State" />
Working DEMO
It is maybe bit late to answer this, but maybe for others looking for the same thing (I was :-)
You can put your address in a div:
<div class="myContainer">
<label id="lbAddress">Provide the address</label>
<input class="address" type="text" name="address" id="address" />
<input class="address" type="text" name="Street" id="Street" />
<input class="address" type="text" name="City" id="City" />
<input type="button" value="FindMe" data-icon="eye" data-iconpos="notext">
</div>
<div><input class="other" type="text" name="other" id="other"/></div>
Then select your container and just the input inside that container in the CSS:
.myContainer > .ui-input-text
{
width:200px;
}
demo: https://jsfiddle.net/petitbarzun/cfazq5k5/
Reading your comments on the answer from ezanker, if you want all the inputs to appear on one line, there needs to be a container with ui-field-contain like this (the label should be there too):
<div class="ui-field-contain">
<label id="lbAddress" style="display:none"></label>
<input class="address" type="text" name="address" id="address" />
<input class="address" type="text" name="Street" id="Street" />
<input class="address" type="text" name="City" id="City" />
<input type="button" value="FindMe" data-icon="eye" data-iconpos="notext">
</div>
<div><input class="other" type="text" name="other" id="other"/></div>
The CSS then looks like this:
.ui-field-contain > #lbAddress~[class*=ui-input-text]
{
width:219px;
}
demo http://jsfiddle.net/petitbarzun/cfazq5k5/1/
why is my placeholder text not appearing for ie 11? This is the only ie I am using. It works fine on chrome and firefox.
<div class="leftform">
<form action="" method="get">
<input type="checkbox" name="EmailCheck" value="Email" class="checkboxSize">Email<br/>
<input type="text" name="EmailAddress" placeholder="Enter email address" class="textBox" size="35"><br>
<input type="text" name="ConfirmEmail" placeholder="Confirm email address" class="textBox2" size="35"><br>
</form>
</div>
IE11 hides the placeholder text when the input is in focus, which probably explains the confusion here (I just ran into this with an input we auto-focus).
Can you please tell me how to add text field in front of label in jquery mobile .
There is two different types of text field in this image.How to implement this?
Just you have to copy simple code to your website...
For input box:-
<div data-role="fieldcontain">
<label for="text-12">Text input:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
For textarea:-
<div data-role="fieldcontain">
<label for="textarea-12">Textarea:</label>
<textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
</div>
Keep that in mind the value of for="" and id="" of input box should be same...
For more details check out:- http://view.jquerymobile.com/1.3.1/demos/widgets/textinputs/
Use this code to add textfield
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" value="" />
Ref this docs to know more informations about JQM
http://jquerymobile.com/demos/1.2.1/docs/forms/textinputs/