I can't set focus on html input, I tried this code, And it doesn't work.
document.getElementById('ember19').focus();
document.getElementById('ember19').click();
document.getElementById('ember19').select();
document.getElementById('ember19').value='Badman55555#hotmail.com';
document.getElementById('ember19').setAttribute('value','Badman55555#hotmail.com');
document.getElementById('ember22').focus();
document.getElementById('ember22').click();
document.getElementById('ember22').select();
document.getElementById('ember22').value='Bad123456';
document.getElementById('ember22').setAttribute('value','Bad123456');
Please before answer try your code on this page
https://id.sonyentertainmentnetwork.com/signin/
Try using autofocus
<input type="text" name="myInput" autofocus />
https://www.w3schools.com/tags/att_autofocus.asp
I want to disable google chrome's persistent autocomplete in all browser for user experience (my Chrome version is 76).
I have tried many solution including :
1). The answers from
Chrome ignores autocomplete="off"
2). All the answers from
autocomplete ='off' is not working when the input type is password and make the input field above it to enable autocomplete
which include
1). Autocomplete="off", autocomplete="somerandomstring"
2). create another fake input above it with hidden style
3). wrap it with invisible div
It seems that the answers from both links are the solution for the outdated version of google chrome almost likely older than 76 chrome version.
<input name="number" type="text" class="form-control search" placeholder="No. Invoice" >
//this input is getting filled with persistent google chrome autocomplete
Expected Output : not filled with autocomplete
Actual Output : filled
Thank you in advance!
I just came across this same issue and none of the original answers seem to work.
As i use the placeholder text, I came up with a solution of adding the placeholder text as the value if the value is blank, as well as changing the color and then use the onfocus event to remove the value if it's equal to the placeholder and remove the color.
Here is an example:
<input type="text" class="form-control" id="search" placeholder="Search Users" value='Search Users' style="color: #6c757d;" onfocus="if (this.value == this.placeholder) {this.value=''; this.style.color=null;}">
The things that you would still have to look out for:
You need to add this to each input.
You need to check input isn't equal to placeholder on validation.
There is one other solution that i found worked:
Add a value to empty input and then remove it using a timeout, this should happen after the autocomplete has run.
html:
<input type="text" class="form-control NoAutoComplete" id="search" placeholder="Search Users" value='Search Users'>
CSS:
.NoAutoComplete {
color: #6c757d;
}
JS:
setTimeout(function () {
$(".NoAutoComplete").val("");
$(".NoAutoComplete").removeClass( "NoAutoComplete" );
}, 1000);
i haven't done to much looking in to this, but you should be able to add a class to all inputs that need not have a value and then delete all values and class at the same time.
I need to be able to prevent the Save Password bubble from even showing up after a user logs in.
Autocomplete=off is not the answer.
I have not come across a post that offers a secure solution for this issue. Is there really no way to disable the password bubble in Chrome??
I found there is no "supported" way to do it.
What I did was copy the password content to a hidden field and remove the password inputs BEFORE submit.
Since there aren't any passwords fields on the page when the submit occurs, the browser never asks to save it.
Here's my javascript code (using jquery):
function executeAdjustment(){
$("#vPassword").val($("#txtPassword").val());
$(":password").remove();
var myForm = document.getElementById("createServerForm");
myForm.action = "executeCreditAdjustment.do";
myForm.submit();
}
After hours of searching, I came up with my own solution, which seems to work in Chrome and Safari (though not in Firefox or Opera, and I haven't tested IE). The trick is to surround the password field with two dummy fields.
<input type="password" class="stealthy" tabindex="-1">
<input type="password" name="password" autocomplete="off">
<input type="password" class="stealthy" tabindex="-1">
Here's the CSS I used:
.stealthy {
left: 0;
margin: 0;
max-height: 1px;
max-width: 1px;
opacity: 0;
outline: none;
overflow: hidden;
pointer-events: none;
position: absolute;
top: 0;
z-index: -1;
}
Note: The dummy input fields can no longer be hidden with display: none as many have suggested, because browsers detect that and ignore the hidden fields, even if the fields themselves are not hidden but are enclosed in a hidden wrapper. Hence, the reason for the CSS class which essentially makes input fields invisible and unclickable without "hiding" them.
Add <input type="password" style="display:none"/> to the top of your form. Chrome's autocomplete will fill in the first password input it finds, and the input before that, so with this trick it will only fill in an invisible input that doesn't matter.
The best solution is to simulate input password with input text by replacing value with asterisks or dots manually.
I handled this with the following markup.
#txtPassword {
-webkit-text-security: disc;
}
<form autocomplete="off">
<input type="text" name="id" autocomplete="off"/>
<input type="password" id="prevent_autofill" autocomplete="off" style="display:none" tabindex="-1" />
<input type="password" name="password" id="txtPassword" autocomplete="off"/>
<button type="submit" class="login100-form-btn">Login</button>
</form>
<input type="textbox" id="UserID" />
<input type="password" style="display:none"/>
<input type="textbox" id="password" />
<script>
function init() {
$('#password').replaceWith('<input type="password" id="password" />');
}
</script>
tested in Firefox and chrome working as expected.
I found no alternative with all the benefits I need so, created a new one.
HTML
<input type="text" name="password" class="js-text-to-password-onedit">
jQuery (replace with vanilla JS with same logic if you don't use jQuery)
$('.js-text-to-password-onedit').focus(function(){
el = $(this);
el.keydown(function(e){
if(el.prop('type')=='text'){
el.prop('type', 'password');
}
});
// This should prevent saving prompt, but it already doesn't happen. Uncomment if nescessary.
//$(el[0].form).submit(function(){
// el.prop('readonly', true);
//});
});
Benefits:
Does not trigger prompt
Does not trigger auto fill (not on page load, nor on type change)
Only affects inputs that are actually used (allowing undisturbed element cloning/templating in complex environments)
Selector by class
Simple and reliable (no new elements, keeps attached js events, if any)
Tested and works on latest Chrome 61, Firefox 55 and IE11 as of today
First of all I wanna tell you something.
When you take [input type="text"] and also [input type="password"]
Major browsers give you popup for that.
Now, replace [input type="password"] to [input type="text"]
then there is css for that
#yourPassTextBoxId{
-webkit-text-secutiry:disc
}
I've subverted this by using 2 regular text boxes. One to contain the actual password and one to function as a mask. I then set the password box's opacity to 0 and the mask text box is disabled - but the background color is set to white making it appear enabled. Then I place the password box on top of the mask box. In a jscript function I update the mask's text value to display a string of '*' characters with each keypress in the password box. Two drawbacks: the blinking cursor might now show depending on your browser. It shows in IE, but not Chrome or Firefox. There's a bit of a delay as the user is typing.
My code snippet is in asp:
$(window).ready(function() {
var pw = $('#txtPassword');
var mask = $('#txtMask');
$(pw).css('opacity', '0');
$(pw).keyup(function() {
var s = '';
for (var i = 0; i < $(pw).val().length; i++)
s = s + '*';
mask.val(s);
})
});
style... .password {
font-family: monospace;
position: absolute;
background-color: white;
}
Asp.net code:
<asp:TextBox runat="server" CssClass="password" Width="300" ID="txtMask" ClientIDMode="Static" MaxLength="30" Enabled="false" />
<asp:TextBox runat="server" CssClass="password" Width="300" ID="txtPassword" ClientIDMode="Static" MaxLength="30" />
I had two issues with how browsers force their password behavior on you when working on a support-only login page within a regular page (the support login should never be saved):
The browser will recommend a login from the rest of the page which gets in the way.
The browser will ask to save the entered tech password.
So I combined two solutions I found on various stackoverflow posts and thought I'd post them here. I'm using jQuery, but the principle can be translated into regular JavaScript as well.
First, have your password field start as a text field and have JavaScript change it later - this gives a decent chance that the browser won't offer a saved password.
Second, just before submitting the form, set the password form back to being a text field, but hide it first so the password can't be seen. This could be made to look prettier by adding another text field when the password field disappears, but that's cosmetic only.
<form id="techForm" action="...">
<input type="text" id="username" name="username">
<input type="text" id="password" name="password"> <!-- this needs to start as a text field -->
<input type="submit" name="submit" value="submit">
</form>
<script type="text/javascript">
$(function()
{
$('#password').on('focus', function()
{
$(this).prop('type', password'); // this stops pre-saved password offers
});
$('#techForm').on('submit', function()
{
$('#password').hide().prop('type', 'text'); // this prevents saving
});
});
</script>
This worked for me on Firefox and Chrome as of 9/12/2017.
The only thing worked for me was adding a space to input's value after document ready and then deleting the space when user focused on the input.
$('.login-input').val(' ');
$('.login-input').on('focus', function() {
$(this).val('');
});
Simple and easy. Works on Chrome 64. In Firefox all you need is adding autocomplete="off" attribute to the input.
My own solution jQuery with PrimeFaces. Tested work in Chrome and Internet Explorer but in mozilla firefox (though not in Firefox)
<script type="text/javascript" charset="utf-8">
$(function(){
$('#frmLogin').on('submit',function(e){
$(PrimeFaces.escapeClientId('frmLogin:usuario')).replaceWith('<label id="frmLogin:usuario1" type="text" name="frmLogin:usuario1" autocomplete="off" class="form-control" maxlength="8" tabindex="2"/>');
$(PrimeFaces.escapeClientId('frmLogin:password')).replaceWith('<label id="frmLogin:password1" type="password" name="frmLogin:password1" autocomplete="off" value="" tabindex="3" class="form-control"/>');
$(PrimeFaces.escapeClientId('frmLogin:password1')).attr("autocomplete","off");
$(PrimeFaces.escapeClientId('frmLogin:usuario1')).attr("autocomplete","off");
$(PrimeFaces.escapeClientId('frmLogin:password_hid')).attr("autocomplete","off");
$(PrimeFaces.escapeClientId('frmLogin:usuario_hid')).attr("autocomplete","off");
});
});
</script>
<h:inputSecret id="password" value="#{loginMB.password}" class="form-control"
placeholder="Contraseña" tabindex="3" label="Contraseña" autocomplete="off" disabled="#{loginMB.bdisabled}"/>
<p:inputText value="#{loginMB.password_hid}" id="password_hid" type="hidden" />
If you choose to let Google Chrome save website passwords, you'll see a prompt every time you sign in to a new website. If you click Never for this site in the prompt, your password for the site is not saved and the site is added to a list of passwords that are never saved.
You can edit this list AND DISABLE THE PROMPT:
Click the Chrome menu Chrome menu on the browser toolbar.
Select Settings.
Click Show advanced settings.
Click Manage saved passwords.
In the Passwords dialog that appears, scroll down to the "Never saved" section at the bottom.
To remove a site from this list, select it and click the X that appears the end of the row.
Now revisit the website and you should see the prompt to save your password information again, if you've allowed Google Chrome to show the prompt.
When a new user comes to the page and types in an email that already exists in the system, I would like to do the following:
Show the error message.
Show the arrow.
Then move the focus(cursor)
to the Password field.
Using jQuery I'm able to move the focus to the password field, but after a few milliseconds, the focus is pulled back to the email field with the Parsley error message.
I have tried using data-parsley-focus="..." and data-parsley-no-focus, but that didn't do anything for me. I've also looked at the source code and I see that validate.focusedField.focus() is what's forcing the focus back to the field with the error, but can't quite figure out how to stop that.
So, is there a way to override this behavior?
The following code works as expected, although you might need to tweak some aspects based on your code.
What I did:
Whenever a field has an error, check if it's a specific field (field1 in my case) and, if so, do something (in this case, focus on field2 input).
Add data-parsley-focus="none" to the form to avoid auto focus on the first input with errors (behaviour by default).
$(document).ready(function() {
$.listen('parsley:field:error', function(parsleyField) {
if (parsleyField.$element.attr('name') === 'field1') {
$("input[name=field2]").focus();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.0.7/parsley.min.js"></script>
<form id="myForm" data-parsley-validate data-parsley-focus="none">
<input type="text" name="field1" required data-parsley-minlength="50" data-parsley-trigger="focusout" />
<input type="text" name="field2" required />
<input type="submit" />
</form>
If you run into some trouble, please provide a fiddle and add the relevant code to your question.
I've created a search page that can be toggled between french and english. So when the user searches a record and toggles to french it displays the same record they were viewing on the english page.
What I want to do is display the record name in the search box when the page is toggled.I assumed it was as simple as doing a $('#inputID').val(record); but it doesn't seem to be working. I've alerted the record name and it works fine, so I'm stumped. All the scripts are linked correctly as well so that's not the problem.
Autocomplete Box Code
<div id="ui-widgit">
<label for="searchParams">
<h1>Search All Programs (By Screen Number or By Error Code):</h1>
</label>
<input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" />
<input type="button" value="Search" name="searchBtn" class="btn_Design" onclick="showSearch(inputID.value)"/>
</div>
Try to change the value of inputID with this
$('#inputID').val(recordToggle);
also have tried this:
$('#inputID input').val(recordToggle);
It is hard to tell with your presented markup but I am assuming you are trying to change the value of $('#inputID') after the page refreshed. It is important where you put this code. If it is placed before <input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" /> you will not return anything with $('#inputID') so you will change the value of nothing to your text. It will give no error. To fix this you can use:
$( document ).ready(function(){
$('#inputID').val(recordToggle);
});
Be sure to read about jQuery's ready function because load may be the better choice.
If this doesn't fix your problem let me know. I will update my answer.