Javascript onfocus and enter key - javascript

I have a login form which contains a username field, password field, and a submit button like so:
<form id="myform" name="myform" method="post" action="servlet/url">
<label>Username:</label>
<input type="text" name="username" value="user_name" placeholder="Username">
<label>Password:</label>
<input type="text" name="user_pwd" value="" placeholder="Password" onfocus="javascript:this.value=''">
<input type="submit" value="Submit">
</form>
If I click the submit button, it works as expected. However, pressing the enter key clears the password value UNLESS I click out of the password field first. I know that this is because of my onfocus attribute, however I would still like the password field to clear away automatically if you click back into it. What could be the cause of the enter key clearing the field?

You could replace onfocus= with onclick=. The functionality is somewhat different however.
I should also note that I cannot reproduce your experience in Chrome, Firefox, IE, nor Edge.

Related

Codeigniter - Chrome autofill change input value after submit

Is quite simple but very strange.
I'm using Codeigniter, i've an App where an User can create other users and then change their passwords.
For this reason i've a simple form as the following:
<form action="<?php echo site_url("Manage/changeUserPassword"); ?>" method="post">
<input hidden class="inputwithiduser" type="text" name="iduser" value="">
<input type="password" id="inputPasswd" name="password" placeholder="New password" value="">
<button type="submit">Save</button>
</form>
I fill the first input (with class inputwithiduser) with JQuery.
Inspectioning, these inputs have the correct values. BUT.... AFTER SUBMIT my controller retrieve as $this->input->post("iduser"); the value that Chrome has saved as Username for my personal login. In other words, CHROME is changing my input (despite inspecting the iduser input with Chrome tool it's all okay) after submit!
Have you any ideas? I tried with autocomplete="off", autocomplete="false", etc without success.
Thank, Luca
Have you tried autocomplete="foo" (or whatever value)? New browsers use this attribute different as they used it before
I have the same issue, and finally i solved by this:
<input type="text" name="username" hidden/>
<input type="password" name="password" hidden/>
add two input before your oiriginal input.

How to empty retained value of email field on browser back on edge?

I am using the following code to prevent value to be retained in the email field when I am pressing the back button on Edge browser.
<form>
<input autocomplete="off" type="email" name="email" value="" id="Email123" placeholder="email" />
</form>
<form autocomplete="off">
<input type="email" name="email" value="" id="Email123" placeholder="email" />
</form>
When I make use of autocomplete="off" in the form tag, it is of no use and the code does not work. Same is the case with input tag. The code is not working in either case.
How do I clear the email field when I click the back button on Edge browser?
You could empty it in JS when the page loads.
document.getElementById('Email123').value = '';
this will only remove the autofilled text and not the default styles that go along with it on the input.
Try to set autocomplete to a random invalid string value, like autocomplete="nope"
Source: https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

Alert blocking "required field" pop-up

I am making a form that when filled out is creates an alert telling you that it was a success and where the user is about to be redirected to. The problem is that this alert seems to be "blocking" the chrome "please fill out this field" pop-up for input fields with the required attribute that were not filled in.
It is (to my knowledge) only an Chrome problem. IE still shows the pop-up after the alert, and I have not been able to try Firefox.
For example
<form method="post" action="sendemail.php">
<input type="text" name="name" required>
<input type="submit" name="submit" onclick="javascript:alert('All done')">
</form>
The best result would be to only show the alert if all the required fields are filled in.
Simply remove the onclick and add onsubmit to the form tag:
<form method="post" action="sendemail.php" onsubmit="javascript:alert('All done')">
<input type="text" name="name" required/>
<input type="submit" name="submit"/>
</form>
onsubmit only fires once the form is submitted, which won't happen if a required input isn't filled in. onclick always fires when clicking the submit button, even if all fields aren't correct.

Chrome email field autocomplete options not showing for my website

As I visit many new websites for the first time, I see that:
For some websites, putting my cursor in the email field of signup form immediately shows me email options from what I had entered in other websites.
For other websites, putting my cursor in the email field does not give me any email options. And, I have to manually type every letter of the email.
I couldn't find what piece of code differentiates the two cases. For my website, I am stuck with #2. I am trying to achieve #1, where user can just re-use emails entered in other websites.
I used some code like this:
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required autocomplete="email">
It seems that you want to enable autocomplete, but you have specified the wrong attribute.
SYNTAX:
Autocomplete="on | off"
In order to save the email address entered for the first time though, you need to have a form tag with the attribute method="POST" on it. It is also recommended to use the autocompletetype attribute to help the browsers populate the forms more accurately.
NOTE: In some cases on older browsers you may also need to add an action if the form doesn't have one. action="javascript:void(0)" works.
An example with autocomplete on and method="POST":
<form method="POST" action="javascript:void(0)">
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required autocomplete="on" autocompletetype=”email”>
<input type="submit">
</form>
An example without autocomplete and method="POST":
<form>
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required autocomplete="off">
<input type="submit">
</form>
See also How to trigger Autofill in Google Chrome?
Difference is in autocomplete attribute of input element.
Syntax : <input autocomplete="">
It allows the browser to automatically filled the input field based on the previously filled data.
Hence, In #1 value of autocomplete attribute should be on.
DEMO
E-mail: <input type="email" name="email" autocomplete="on">
In #2 value of autocomplete attribute should be off.
DEMO
E-mail: <input type="email" name="email" autocomplete="off">
The answers so far are wrong/outdated or incomplete.
Using autocomplete="email" is perfectly valid. But the browsers do not handle it very well at the moment. In Firefox and Chrome, only the name attribute is used for autocompletion. So you should stick with name="email".
If the Chrome user really wants to have a proper autocompletion for every type that autocomplete supports, he/she has to fill out the Autofill settings. After these settings are filled, the autocompletion does not depend on the name attribute anymore, but uses the type of autocomplete. I.E. it will suggest the user's email address for fields with autocomplete="email".
So in order to have the best browser support, you should keep <input name="email" autocomplete="email" [...]>. As soon as there has been at least one submitted form with name="email" or prefilled Autofill settings, the browser should actually autocomplete your input field.
Further Resources:
caniuse: autocomplete attribute: on & off values
caniuse: input[autocomplete] (values besides on/off)
For some websites, putting my cursor in the email field of signup form immediately shows me email options from what I had entered in other websites.
I cannot reproduce that on the latest Chrome on Mac OS X. You actually have to doubleclick the input for the autocompletion to show up.
The correct values for the autocomplete attribute is "on" or "off" as you can see at : https://www.w3schools.com/Tags/att_input_autocomplete.asp
Use autocomplete="on" in form tag. like below.
<form action="" method="post" autocomplete="on">
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required>
<input type="submit" value="Submit">
</form>

Enter Key not working in button

i'm using button key for my project but this is not work when i push Enter Key.
why 'enter key' not working in this form?
<form action="" method="post">
<input type="text" >
<input type="button" >
</form>
how this is work with javascript, plz help me
i will not sue type="submit"
It seems you want implicit submission:
A form element's default button is the first submit
button in tree order whose form owner is that
form element.
If the user agent supports letting the user submit a form implicitly
(for example, on some platforms hitting the "enter" key while a text
field is focused implicitly submits the form), then doing so for a
form whose default button has a defined activation behavior
must cause the user agent to run synthetic click activation steps
on that default button.
Therefore, the button must be a submit button, not a button in button state:
<input type="submit">
I think an <input type="submit"> is what you want :)
$(form).on('submit', function{
//do whatever you want...
})
<form action="raftel">
<input name="name" type="text"/>
<input name="password" type="password"/>
<input type="submit"/>
</form>

Categories

Resources