Hide credentials prompt on safari (iOS and macOS) - javascript

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?

Related

Entering text + simulate Enter key using javascript/jquery

Image of form:
Hi, I have created a chrome extension that injects jquery actions in a form which has 2 input boxes and a login button. Hence after entering the text in input box of form enter key is a must or user should manually enter the text.
I have tried injecting the text value into input boxes followed by the login click but it didnt work as react listeners in the form are not triggered.
UI Input boxes
1. email input box
<input type="email" name="email" class="auth0-lock-input" placeholder="yours#example.com" autocomplete="off" autocapitalize="off" aria-label="Email" aria-invalid="false" value="" >
2. password input box
<input type="password" name="password" class="auth0-lock-input" autocomplete="off" autocapitalize="off" value="" aria-label="Password" aria-invalid="false" placeholder="your password" >
3. Login button
<button class="auth0-lock-submit" name="submit" type="submit" aria-label="Log In" style="background-color: rgb(51, 107, 155); display: block;">

Chrome rises autofill input event after clicking the page only

fill the form, save values in Chrome for Mac, then reload page.
alert will show only after page is clicked,
why is that? How can I get input events fired right after
page load, not after click? Thank you
link to reproduce the issue here,
this is source
Code of the example below:
<form action="https://test.de" method="POST" name="loginform">
<input oninput="alert('text')" type="text" id="name" placeholder="Username" name="username" />
<input oninput="alert('pass')" type="password" id="password" placeholder="Password" name="password" />
<input type="submit" />
</form>
<div class="log"></div>
<script>document.querySelector("input").focus();</script>

How to calculate price when optional checkbox is clicked(using paypal payment form) [duplicate]

This question already has an answer here:
How to change the textbox value from checkbox
(1 answer)
Closed 6 years ago.
I have built an order form in which the user would enter in a company name, last name, email and an address and an optional checkbox for shipping priced at $19.99. I downloaded the paypal payment form module for my dreamweaver cs5 program which converts the form into a paypal form.
The nice thing about this program is that it automatically creates a mysql database with all the input fields when a person clicks the "pay now" button It also generates the files automatically in a folder called "PPPaymentForm" which i then upload in the root of my site and gives me a backend as well so i can monitor all the payment transactions.
So back to my original issue, i need some way so that if a person decides to click the checkbox which is set at $19.99, that it will automatically add to the price which is set in an hidden input named "hdwppamount" where the value is set to $175.00. So therefor if the shipping option is clicked, the person would click the "Pay Now" button and would be redirected to the paypal payment page, with the new calculated price at $194.99.
I am not proficient with javascript or php, and tried many functions myself but nothing worked. Could someone help me with this please?
Thank You
<form action="PPPaymentForm/PPPaymentForm.php" method="post" name="topchoiceform" id="topchoiceform">
<input placeholder="Company Name" type="text" name="companyname" required>
<input placeholder="First Name" type="text" name="firstname" required>
<input placeholder="Last Name" type="text" name="lastname" required>
<input placeholder="Email" type="email" name="email" required>
<input placeholder="Address" type="text" name="address" required>
<input type="checkbox" id="shipping" name='shipping' />$optional Shipping($19.99)
<button name="submit" type="submit">Pay Now</button>
<input type="hidden" name="hdwtablename" id="hdwtablename" value="1">
<input type="hidden" name="hdwppproductname" id="hdwppproductname" value="Basic 175 Plan">
<input type="hidden" name="hdwppamount" id="hdwppamount" value="175">
<input type="hidden" name="hdwppcurrency" id="hdwppcurrency" value="USD">
<input type="hidden" name="hdwpplanguage" id="hdwpplanguage" value="en_US">
<input type="hidden" name="hdwok" id="hdwok" value="">
<input type="hidden" name="hdwemail" id="hdwemail" value="email+gmail.com">
<input type="hidden" name="hdwnook" id="hdwnook" value="http://">
<input type="hidden" name="hdwactivation_email" id="hdwactivation_email" value="email">
</form>
First, we detect when the shipping checkbox is changed, then we check to see if it is in a checked state. If it is in a checked state, we add the shipping cost to the hidden text box. We also need to reset the value if the user changes their mind about shipping so you need a basic IF ELSE condition on it.
Try this:
$('#shipping').change(function(){
var hdwppamount = Number($("#hdwppamount").val())
var shippingcost = 19.99;
if (this.checked) {
$("#hdwppamount").val(hdwppamount+shippingcost)
} else {
$("#hdwppamount").val(hdwppamount-shippingcost)
}
})
JSFiddle: https://jsfiddle.net/rdawkins/8qrm3mf1/14/

Angular JS get error to show after user highlights input field and doesnt enter anything

I have some Angular JS validation working on my wizard steps app and errors appear when the user enters a character in the input field and removes it. I am wondering how do I get the error to show after the user is on the input field and does not enter anything? (They tab onto the field and tab off without entering anything) I hope this makes sense....
<td>
<label>Your Name</label>
</td>
<td>
<input class="form-control" type="text" name="name" ng-model="user.name" required />
<span class="error" ng-show="user.validate.step1.name.$invalid && !user.validate.step1.name.$pristine">Required Field
</span>
Use ng-blur:
<td>
<label>Your Name</label>
</td>
<td>
<input class="form-control" type="text" name="name" ng-model="user.name" ng-blur="blur=true" required />
<span class="error" ng-show="user.validate.step1.name.$invalid && blur">Required Field
</span>
The easiest/best way would probably by marking the control as dirty by using ng-blur:
<input class="form-control" type="text" name="name" ng-model="user.name" required ng-blur="user.validate.step1.name.$dirty = true"/>
The next 1.3 beta version(beta 12) will have a $touched you can use to check for it, but none of the current versions have that yet.

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

Categories