We Keep Coding

Hide credentials prompt on safari (iOS and macOS)

I´m trying to avoid that the native browser credentials prompt appears. I have a registration flow with 3 different screens, in the first, user must fill name, surname, email, and password. In this screen i have the form with the different inputs, and only password have "type=password":
<form autocapitalize="none">
<input aria-invalid="false" autocomplete="given-name" id="firstName" type="text" class="MuiInputBase-input MuiInput-input makeStyles- input-114 makeStyles-input-119" autocapitalize="words" value="">
<input aria-invalid="false" autocomplete="family-name" id="lastName" type="text" class="MuiInputBase-input MuiInput-input makeStyles- input-114 makeStyles-input-123" autocapitalize="words" value="">
<input aria-invalid="false" id="birthdate" type="text" class="MuiInputBase-input MuiInput-input makeStyles-input-114 makeStyles- input-127" placeholder="mm/dd/yyyy" value="">
<input aria-invalid="false" id="mobile" type="tel" class="MuiInputBase-input MuiInput-input makeStyles-input-114 makeStyles-input-131 MuiInputBase-inputAdornedStart" autocapitalize="words" value="+63 ">
<input aria-invalid="true" autocomplete="new-password" id="newPassword" type="text" class="MuiInputBase-input MuiInput-input makeStyles-input-114 makeStyles-input-135 password" autocapitalize="words" value="">
</form>
<button type="button" style="width: 160px;">Next</button>
When I press on "Next" button, it goes to "Terms and conditions" screen, and the credential prompt is showed. Note that the form is not submitted with this button, and there´s no network call when I press "Next" button.
For chrome, i have changed the type of the password input to "text" and I have implemented the class "password" that hides the characters by css property webkit-text-security: disk:
.password {
-webkit-text-security: disc;
-moz-text-security: disc;
}
but this solution doesn´t works for firefox neither iOS and macOS safari. The problem is that Firefox is not a webkit browser based, and it doesn´t have any similar property; and Safari recognize a password input by its type="password" and by that css property -webkit-text-security: disk, so the browser still shows the credential prompt.
Anybody can help me with this problem?

how to validate form in angular 2 having one input field?

I have one input field in which user can enter email as well as 10 digit phone number if any of this condition is fulfill i want to enable continue button . I am able to enable button when user type email but I fail to enable the button when user type 10 digit mobile number
here is my code
https://stackblitz.com/edit/angular-p5knn6?file=src%2Fapp%2Flogin-component%2Flogin-component.component.html
<div class="login_div">
<form #loginForm="ngForm">
<input type="text" name="email"
autocomplete="off"
placeholder="Enter the Email or Number"
[(ngModel)]="userenterValue"
required
pattern="^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$">
<input type="submit" value="Continue"
class="btn"
[class.disbled]="!loginForm.valid"
[disabled]="!loginForm.valid">
</form>
</div>

Just use the pattern like this:
pattern="^(\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+)$|^(\d{10})$"

Change bootstrap form based on the users active input. Display a change in the form only based on the text entered and no button clicks

Like credit card logo pops up as you enter in your credit card number. Instead of a logo I want to display a change in the form without a button click. Form automatically detects change after the input field has been filled.

Simple example:
In Angularjs
$scope.changeStyle=function(){
$scope.color="red";
}
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" ng-model="someName" ng-change="changeStyle()" id="exampleInputEmail1" ng-style="{'color':color}"
placeholder="Email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

how to automatic trigger the enter button after switching to next input text

hello guys i need to automatic trigger the enter button after the user switch to another html input type='text'. i need to do this so that i can validate the form.
here is my code:
<input type="text" class="form-control input-sm" name="student_lastname" placeholder="Last Name" pattern="[A-Za-z].{1,}" title="Only Letters are accepted and more than 1 letter" required>
i need the error title="Only Letters are accepted and more than 1 letter" to pop up when the user is finished typing to the box
right now this is what my code looks like

onblur is the perfect solution, and was made specifically for when the user leaves an input field. Just do something like this:
For HTML:
<input type="text" onblur="validate()" />
And for JS:
function validate() {
// This is how you automatically make them click the Enter button:
enterButton.click();
}

Text disappear on click, but new text entered disappears to

Well I am making my first landing page, something not overly professional, I want to get in the hang of being able to make simple web pages myself.
So my issue is that whenever you click on the textbox, the text disappears. Which it should. But when the user enters text, clicks off the text box and clicks back on it, that text disappears.
How can I make it so that the newly entered text does not disappear?
My current code for the text fields:
http://pastie.org/8366114
<input type="text" value="Enter Your First Name" id="form"
onblur="javascript:if(this.value=='')this.value='Enter Your First Name';"
onclick="javascript:if(this.value=='Enter Your First Name')this.value='';"
onFocus="this.value=''">
</input></br>
<input type="text" value="Enter Your Email" id="form"
onblur="javascript:if(this.value=='')this.value='Enter Your Email';"
onclick="javascript:if(this.value=='Enter Your Email')this.value='';"
onFocus="this.value=''">
</input></br>
<input type="text" value="Enter Your Phone Number" id="form"
onblur="javascript:if(this.value=='')this.value='Enter Your Phone Number';"
onclick="javascript:if(this.value=='Enter Your Phone Number')this.value='';"
onFocus="this.value=''">
</input></br>
<input type="submit" class="button" name="submit" value=""></input>
I apologize for not posting it on here, but I don't know how to do the code block thing..

to do this with javascript all you need is
<input type="text" value="Enter Your First Name"
onblur="if(this.value=='')this.value='Enter Your First Name';"
onfocus="if(this.value=='Enter Your First Name')this.value='';" />
DEMO
however you can just simply use the html5 placeholder reference
also
dont use the same id more then once, instead use class.
input is self-closing (like <br>)
</br> is wrong use <br> or <br />
here is a working version of your code, i also added submit as the value for your button
<input type="text" placeholder="Enter Your First Name" class="form"><br/>
<input type="text" placeholder="Enter Your Email" class="form"><br/>
<input type="text" placeholder="Enter Your Phone Number" class="form"><br/>
<input type="submit" class="button" name="submit" value="submit">
DEMO

<input type="text" value="Enter Your First Name" id="form" onblur="if(this.value=='')this.value='Enter Your First Name';" onfocus="if(this.value=='Enter Your First Name')this.value='';" />
or if you are using HTML5, you can use placeholder attribute:
<input type="text" placeholder="Enter Your First Name" id="form" />

you have to make the onfocus event the same as the onclick event, e.g:
onfocus="javascript: if (this.value == 'Enter Your First Name') this.value = '';"

onFocus="this.value=''"
This is causing your text fields to be reset to blank unconditionally.
You probably only need onclick or onfocus here, and since onfocus will take into account tabbing into the field as well as clicking it with the mouse, I would recommend moving the code from onclick to onfocus and deleting onclick altogether.

Remove content from form onclick:
in haml:
= f.text_field :title, :value => 'Name', :onfocus => "if (this.value=='Name') this.value='';"
in html:
<input id="project_title" name="project[title]" onfocus="if (this.value=='Name') this.value='';" type="text" value="Name">