When you have saved username and password for some site Chrome will autofill that username and password, but if you try to get the value for the password input field it is empty String even though there is value there ******.
If you click somewhere on the page no mater where the value of the input type="password" will be filled.
This is Fiddle user/pass of the structure of the html and the console.log command. It cannot be seen here but it can be reproduced on every page that has login form and the username and password are autofilled on the load of the page. If you inspect the value of the field before clicking anywhere else on the site it will be empty String.
This is not the case in Firefox or Internet Explorer it will fill the value of the input element with the password.
I am using Windows 7 Ultimate 64-bit OS and Google Chrome version is 48.0.2564.97 m
Is this normal behavior, bug or?
UPDATE:
If you click on F5 to reload the page and inspect the password field the value for password will be there. If you click the reload button in Chrome in top left corner the value for the password field will be empty string.
This seems to be a bug in Chrome. When Chrome auto-fills a password on an initial page load (but not a refresh), the value appears in the form field on-screen, but querying passwordField.value in Javascript returns an empty string. If you depend on seeing that value in Javascript, this prevents you from doing so. Once the user does any other action on the page, such as clicking anywhere on the page, the value suddenly becomes visible to Javascript.
I'm not actually 100% sure if this is a bug, or if there is a security reason for doing this such as preventing a hidden frame from stealing your password by tricking the browser into filling it in.
A workaround that we have used is to detect the background color change that Chrome makes to fields that it has auto-filled. Chrome colors the background of auto-filled fields yellow, and this change is always visible to Javascript even when the value is not. Detecting this in Javascript lets us know that the field was auto-filled with a value, even though we see the value as blank in Javascript. In our case, we have a login form where the submit button is not enabled until you fill in something in the password field, and detecting either a value or the auto-fill background-color is good enough to determine that something is in the field. We can then enable the submit button, and clicking the button (or pressing enter) instantly makes the password field value visible to Javascript because interacting with the page fixes the problem, so we can proceed normally from there.
Working Answer as of July 8, 2016
Adam correctly stated this is a bug (or intended behavior). However, none of the previous answers actually say how to fix this, so here is a method to force Chrome to treat the autocompleted value as a real value.
Several things need to happen in order, and this needs to only run in Chrome and not Firefox, hence the if.
First we focus on the element. We then create a new TextEvent, and run initTextEvent, which adds in a custom string that we specify (I used "#####") to the beginning of the value. This triggers Chrome to actually start acting like the value is real. We can then remove the custom string that we added, and then we unfocus.
Code:
input.focus();
var event = document.createEvent('TextEvent');
if ( event.initTextEvent ) {
event.initTextEvent('textInput', true, true, window, '#####');
input.dispatchEvent(event);
input.value = input.value.replace('#####','');
}
input.blur();
Edit August 10, 2016
This only works right now in Chrome on Windows and Android. Doesn't work on OSX. Additionally, it will stop working at all in Sept 2016, according to:
https://www.chromestatus.com/features/5718803933560832
Also, I've opened a Chromium ticket.
https://bugs.chromium.org/p/chromium/issues/detail?id=636425
As of August 12, a member of the Chrome team said on the above ticket that the behavior won't be changing because they don't consider it a bug.
Long-term Work-Around Suggestion:
That said, the current behavior has been tweaked from when it was first implemented. The user no longer has to interact with the password input for the value to be reported. The user now just needs to interact (send a mouse or keyboard event) with any part of the page. That means that while running validation on pageload still won't work, clicking on a submit button WILL cause Chrome to correctly report the password value. The work-around then, is to revalidate all inputs that might be autocompleted, if that is what you are trying to do, on submit.
Edit December 13, 2016:
A new Chromium ticket has been opened and is being received better. If interested in changing this behavior of Chrome's, please star this new ticket:
https://bugs.chromium.org/p/chromium/issues/detail?id=669724
Continuing from what Kelderic said, here's my work around. Like a lot of people, I don't need the actual password value. I really just need to know that the password box has been autofilled, so that I can display the proper validation messages.
Personally, I would not use suggested solution to detect the background color change cause by Chrome's autofill. That approach seems brittle. It depends on that yellow color never changing. But that could be changed by an extension and be different in another Blink based browser (ie. Opera). Plus, there's no promise Google wont use a different color in the future. My method works regardless of style.
First, in CSS I set the content of the INPUT when the -webkit-autofil pseudo-class is applied to it:
input:-webkit-autofill {
content: "\feff"
}
Then, I created a routine to check for the content to be set:
const autofillContent = `"${String.fromCharCode(0xFEFF)}"`;
function checkAutofill(input) {
if (!input.value) {
const style = window.getComputedStyle(input);
if (style.content !== autofillContent)
return false;
}
//the autofill was detected
input.classList.add('valid'); //replace this. do want you want to the input
return true;
}
Lastly, I polled the input to allow the autofill time to complete:
const input = document.querySelector("input[type=password]");
if (!checkAutofill(input)) {
let interval = 0;
const intervalId = setInterval(() => {
if (checkAutofill(input) || interval++ >= 20)
clearInterval(intervalId);
}, 100);
}
It is amazing that in 2021 this has not been solved in Chrome yet, I have had issue with autocomplete since 2014 and still nothing.
Chrome functionality autocomplete is misleading for the user, I do not know what are they trying to achieve but does not look good.
As it is now, form appears showing auto-completed text (user/email/pass) to the user, but in the background html - values are not inside of the elements.
As values are not in fields custom validation will disable submit button.
Script that checks fields values will say value is null, which is even more confusing for the user as s/he can see text is there, and can assume it is valid, leading to confusing delete-one insert one character. (Embarrassingly, I have to admit I did not know that you need to click in the body of the HTML, so I wonder how many users don not know the same)
In my case I wanted to have empty field always and then fount out it is just needlessly spent time to make it work.
If we try autocomplete=off we will discover that it is not working. And to validate fields and let say enable button we need to do some trickery.
(Have in mind that I have tried autocomplete=password new-password) and other type of Hocus-Pocus trickery from official resource.
At the end I have done this.
<script>
$('#user').value = ' '; //one space
$('#pass').value = ' '; // one space - if this is empty/null it will autopopulate regardless of on load event
window.addEventListener('load', () => {
$('#user').value = ''; // empty string
$('#pass').value = ''; // empty string
});
</script>
So, it will blink for a split second in some cases in password field with * not ideal but :/ ...
Here's my solution to this issue:
$(document).ready(function(){
if ( $("input:-webkit-autofill").length ){
$(".error").text("Chrome autofill detected. Please click anywhere.");
}
});
$(document).click(function(){
$(".error").text("");
});
Basically, clicking makes the input visible to the user, so I ask the user to click and when they do, I hide the message.
Not the most elegant solution but probably the quickest.
$(document).ready
does not wait for autofill of browser, it should be replaced by
$(window).on("load", checkforAutoFill())
Another option as of Dec. 16 / Chrome 54
I can't get the value of the password field, but, after "a short while", I can get the length of the password by selecting it, which is sufficient for me to enable the submit button.
setTimeout(function() {
// get the password field
var pwd = document.getElementById('pwd');
pwd.focus();
pwd.select();
var noChars = pwd.selectionEnd;
// move focus to username field for first-time visitors
document.getElementById('username').focus()
if (noChars > 0) {
document.getElementById('loginBtn').disabled = false;
}
}, 100);
The workaround specified by Adam:
... detect the background color change that Chrome makes to fields that it has auto-filled. Chrome colors the background of auto-filled fields yellow, and this change is always visible to Javascript even when the value is not. Detecting this in Javascript lets us know that the field was auto-filled with a value, even though we see the value as blank in Javascript
I did like this:-
getComputedStyle(element).backgroundColor === "rgb(250, 255, 189)"
where rgb(250, 255, 189) is the yellow color Chrome applies to auto filled inputs.
I have found a solution to this issue that works for my purposes at least.
I have a login form that I just want to hit enter on as soon as it loads but I was running into the password blank issue in Chrome.
The following seems to work, allowing the initial enter key to fail and retrying again once Chrome wakes up and provides the password value.
$(function(){
// bind form submit loginOnSubmit
$('#loginForm').submit(loginOnSubmit);
// submit form when enter pressed on username or password inputs
$('#username,#password').keydown(function(e) {
if (e.keyCode == 13) {
$('#loginForm').submit(e);
return false;
}
});
});
function loginOnSubmit(e, passwordRetry) {
// on submit check if password is blank, if so run this again in 100 milliseconds
// passwordRetry flag prevents an infinite loop
if(password.value == "" && passwordRetry != true)
{
setTimeout(function(){loginOnSubmit(e,true);},100);
return false;
}
// login logic here
}
Just wrote an angular directive related to this. Ended up with the following code:
if ('password' == $attrs.type) {
const _interval = $interval(() => { //interval required, chrome takes some time to autofill
if ($element.is(':-webkit-autofill')) { //jQuery.is()
//your code
$interval.cancel(_interval);
}
}, 500, 10); //0.5s, 10 times
}
ps: it wont detect 100% of the times, chrome might take longer than 5 seconds to fill the input.
Chrome's intended behavior is that an auto-filled password has an empty value in the DOM until the user interacts with the frame in some way, at which point chrome actually populates the value. Until this point any client side validation or attempt to ajax submit the form will see the password as empty.
This 'populate password value on frame interaction' behavior is inconsistent. I've found when the form is hosted in a same-origin iframe it only operates on the first load, and never on subsequent loads.
This is most evident on ajax forms where the autocomplete password populates on first load, however if that password is invalid and the ajax submission re-renders the form DOM, the autocompleted password re-appears visually but the value is never populated, irrespective of interaction.
None of the workarounds mentioned such as triggering blur or input events worked in this scenario. The only workaround I've found is to reset the password field value after the ajax process re-renders the form, e.g.:
$('input[type="password"]').val("");
After the above, Chrome actually autocompletes the password again but with the value actually populated.
In my current use case I'm using ASP.NET's Ajax.BeginForm and use the above workaround in the AjaxOptions.OnSuccess callback.
$element.is("*:-webkit-autofill")
works for me
With Angular, the new behaviour in Chrome (only allowing autofilled values to be read after the user has interaction with the page) manifests itself as an issue when you're using Angular's validation functionality in certain scenarios (for e.g using standard method/action attributes on the form). As the submit handler is executed immediately, it does not allow the form validators to capture the autofilled values from Chrome.
A solution I found for this to explicitly call the form controllers $commitViewValue function in the submit handler to trigger a revalidation before checking form.$valid or form.invalid etc.
Example:
function submit ($event) {
// Allow model to be updated by Chrome autofill
// #see http://stackoverflow.com/questions/35049555/chrome-autofill-autocomplete-no-value-for-password
$scope.loginModule.$commitViewValue();
if ($scope.loginModule.$invalid) {
// Disallow login
$scope.loginModule.$submitted = true;
$event.preventDefault();
} else {
// Allow login
}
}
Although this is working for us so far, I would be very interested if someone has found another, more elegant work around for the issue.
var txtInput = $(sTxt);
txtInput.focus();
txtInput.select();
This solution worked in my case.
Using jQuery 3.1.1.
If you want make input to be seen as fulfilled, try to trigger blur on it:
$('input[type="password"]').blur();
The autocomplete feature has successfully disabled.
It Works!
[HTML]
<div id="login_screen" style="min-height: 45px;">
<input id="password_1" type="text" name="password">
</div>
[JQuery]
$("#login_screen").on('keyup keydown mousedown', '#password_1', function (e) {
let elem = $(this);
if (elem.val().length > 0 && elem.attr("type") === "text") {
elem.attr("type", "password");
} else {
setTimeout(function () {
if (elem.val().length === 0) {
elem.attr("type", "text");
elem.hide();
setTimeout(function () {
elem.show().focus();
}, 1);
}
}, 1);
}
if (elem.val() === "" && e.type === "mousedown") {
elem.hide();
setTimeout(function () {
elem.show().focus();
}, 1);
}
});
To me none of this solutions seemed to work.
I think this is worth mentioning that if you want to use it for CSS styling you sould use -webkit-autofill property like this:
input:-webkit-autofill~.label,
input:-webkit-autofill:hover~.label,
input:-webkit-autofill:focus~.label
input:focus~.label,
input:not(.empty)~.label {
top: -12px;
font-size: 12px;
color: rgba(0, 0, 0, .4);
font-weight: 600
}
My solution comparing my css to the chrome autocomplete color...
$('input, select, textarea').each(function(){
var inputValue = $(this).val();
if ( inputValue != "" || $(this).css("background-color") != "rgba(255, 255, 255, 0)") {
$(this).parents('.form-group').addClass('focused');
}
});
I tried all the solutions and wasn't working for me so i came up with this.
My problem is i have an input that move the placeholder top when it is filled, off course this is not working when Chrome autofill it.
Only tested in Chrome :
setTimeout(function () {
var autofilled = document.querySelectorAll('input:-webkit-autofill');
for (var i = 0; i < autofilled.length; i++) {
Do something with your input autofilled
}
}, 200);
My version is 95.0.4638.69
I'm facing a similar issue and I solved it by changing my form's name from "login-form" to another name which does not mean anything and solve it. Reason why I didn't remove name attribute is because if I remove name attribute Chrome will look up to id attribute and do the same thing.
Option using onanimationstart event (ReactJs) - Mar 22
I could avoid the needing of verifying periodically if the input was autofilled, as described above using setInterval, by taking advantage of the onanimationstart event. I don't know if it will work in every case, but definitely did the trick for me.
I'll provide a code sample in ReactJs, it may be explanatory enough to be transposed to another context.
First of all, is necessary to add in your input the onAnimationStart property, in such a way that the event is passed as parameter to your function, as following below.
<input
className={componentClass}
placeholder={placeholder}
onChange={handleChange}
onFocus={onFocus}
onMouseEnter={onHover}
onMouseLeave={onHover}
onBlur={onBlur}
disabled={disabled}
name={name}
value={value}
onAnimationStart={e => this.onAnimationStart(e)}
/>
Then let's proceed to the onAnimationStart function body.
onAnimationStart(event) {
// on autofill animation
if (event.animationName === 'onAutoFillStart') {
event.target?.labels[0].classList.add('grm-form__isAutofilled');
}
}
First I verified if the animation name was actually the auto-fill animation, and then I added a class to the first label of my input, this is my use case but can be adapted to solve different problems.
Just set the autocomplete attribute to username for the username field and new-password for the password field;
<input type="text" id="username" autocomplete="username">
<input type="password" id="password" autocomplete="new-password" >
You mentioned:
If you click somewhere on the page no matter where the value of the input type="password" will be filled.
Which is why I simply use $('body').click(); to simulate this first click, after which the value is available in JavaScript.
Also, I set autocomplete="new-password" on my signup form password field, so that the field is not autofilled and users have to fill in a new password.
See this Google Developers page for more information.
It's not a bug. It's a security issue. Imagine if one could just use javascript to retrieve autofilled passwords without the users' acknowledgment.
Related
Using Cognos Analtyics 11.1.7IF9.
I have a user who, oddly enough, wants Cognos to make his workflow more efficient. (The nerve!) He thinks that if he can use the TAB button to navigate a prompt page, he'll be faster because he never needs to reach for the mouse.
To test this I created a simple report with a very simple prompt page using only textbox prompts. As I tab I notice it tabs to everything in the browser: browser tabs, the address bar, other objects in Cognos, ...even the labels (text items) I created for the prompts. Oh... and yes, at some point focus lands on a prompt control.
Within Cognos, I see that the tab order generally appears to be from the top down. (I haven't tried multiple columns of prompts in a table yet.) I must tab through the visual elements between the prompts. Also, while value prompts get focus, there is no visible indication of this.
Is there a way to set the tab order for the prompts on a prompt page?
Can I force it to skip the non-prompt elements?
Can the prompts be made to indicate that they have focus?
I tagged this question with javascript because I figure the answer will likely involve a Custom Control or a Page Module.
Of course, then I'll need to figure out how all this will work with cascading prompts and conditional blocks.
I found a similar post complaining about this being a problem in Cognos 8. The answer contains no detail. It just says to go to a non-existent web page.
I had the same frustration as your user and I made a solution a while back that could work for you. It's not the most elegant javascript and I get a weird error in the console but functionally it works so I haven't needed to fix it.
I created a custom control script that does 2 things on a prompt page.
First, it removes the ability to "select" text item elements on the page. If you only have text items and prompts on the page it sets it's "Tabindex" to "-1". This allows you to tab from one prompt field to the next without it selecting invisible elements or text elements between prompts.
Secondly, if you press "Enter" on the keyboard it automatically submits the form. I am pasting the code below which you can save as a .js and call it in a custom control on a prompt page. Set the UI Type to "None"
define( function() {
"use strict";
function AdvancedControl()
{
};
AdvancedControl.prototype.initialize = function( oControlHost, fnDoneInitializing )
{
function enterSubmit (e)
{
if(e.keyCode === 13)
{
try {oControlHost.finish();} catch {}
}
};
function setTab () {
let nL = [...document.querySelectorAll("[specname=textItem]")]
//console.log(nL)
nL.forEach((node) =>{
node.setAttribute('tabindex','-1')
})
};
setTab();
let exec_submit = document.addEventListener("keydown", enterSubmit, false);
try {exec_submit;} catch {}
fnDoneInitializing();
};
return AdvancedControl;
});
I'm trying to create a PowerShell script to open Internet Explorer, navigate to https://clockify.me/login , fill in the email and password inputs and submit the form or click the log in button.
The problem is that, when filling the inputs using:
document.getElementById("email").value="123"
document.getElementById("password").value="123"
I have the following results:
When I submit the form with document.forms[0].submit() the pages reload with URL https://clockify.me/login?email=&password= and nothing happens
When I click the button, using javascript or manually, it considers that the inputs are empty
So, is there a way to work around this? Either using purely javascript or PowerShell (I wish to keep the IE window invisible)
Thanks!
Even though you are changing the values of the input DOM objects, that is not enough to trigger the change detection of the underlying Angular libraries, thus making the form appear 'empty'.
The following pure JS example works on Chrome, but I have not tested it in Internet Explorer:
let email = document.getElementById("email");
let password = document.getElementById("password");
let button = document.getElementsByTagName("button")[0];
email.value = 'someone#example.com';
password.value = 'yourpassword';
// Trigger change detection
email.dispatchEvent(new Event('input'));
password.dispatchEvent(new Event('input'));
button.click();
In case dispatchEvent does not work in IE, you could try with createEvent and initEvent. See dispatchEvent not working in IE11
I have an "editable table" in my web application. How it works is that when you click on the td of the table, I read the innerHTML of the td and generate an input field which I inject into the td with the value of the innerHTML.
When you blur/focus-out of the input field, I destroy the input field and set the innerHTML of the new value, as well as send an AJAX request to update that field. This works perfectly on desktops and android phones, but on iOS Safari it will get progressively slower the more values you edit. After approx. 250 edits, scrolling will become very choppy and eventually the page will become almost unusable. A page refresh does not fix the issue, it requires you to close the web page entirely and start again.
This leads me to believe that Safari is not releasing memory of the destroyed input fields.
The relevant JavaScript code is given below and is fired on click on a td:
_handleEditing: function($td) {
var value = $td.find("span").html().replace(",", ""),
ctrl = this;
$td.unbind('click');
// Clone the input control
var $editControl = $('#input .edit-control').clone();
if(this.isMobile) {
$editControl.attr('type', 'number');
$editControl.attr('step', '0.01');
}
// Inject editControl into td html and set appropriate values
$td.html($editControl);
$editControl.val(value);
// Focus the edit control and set the selection range
$editControl.focus();
setTimeout(function() {
$editControl.get(0).setSelectionRange(0, value.length);
}, 0);
firstKeydown = true;
// Handle leaving the input field and returning to normal number
$editControl.on('blur', function(){
var newValue = $editControl.val();
// If the newValue is empty, go back to the old value
newValue = (newValue === '') ? value : newValue;
var parsedNewValue = parseFloat(newValue).toFixed(2);
// If the newValue is not actually a number, go back to the old value
newValue = isFinite(parsedNewValue) ? parsedNewValue : value;
$editControl.unbind().remove();
$editControl = null;
$td.html("<span>"+newValue+"</span>");
// Queue this value update to server
if(parseFloat(newValue) !== parseFloat(value)) {
ctrl.handleValueChanged($td, value, newValue);
}
// Reinstate the click handler on the td
$td.click(function(){
ctrl._handleEditing($td);
});
});
this._attachNavigationHandlers($editControl);
},
ANY HELP WOULD BE GREATLY APPRECIATED.
APPLE DEVELOPERS PLEASE HELP
Based on research I've been doing for a similar issue (gradual performance degradation on iOS, I've come across numerous sources that indicate this is a problem with iOS itself.
The performance issue in iOS 9 seems to be related to a bug in Safari. Whether you are using Safari, UIWebView or WKWebView...you will notice a hit in performance every time you select a text input field. I created a basic html page with 100 text inputs...and as I traverse through the inputs a few times, the app eventually becomes unresponsive to gestures. The only solution in Webview/Webkit (that I am aware of) is to restart the app.
Reference:
https://forums.developer.apple.com/thread/21956
As of right now, there does not seem to be a solution. In my case, I am force closing the app when the user logs out. Unfortunately, if you want your app on the App Store, you can't programmatically quit your app.
I have the following situation in a web application I am working on:
I have a form with a set of index field values that a user enters information into and then submits the form to the server. Field validation takes place on the server. If any field is found to be invalid, the form is redisplayed and I want to the input focus to automatically go to the first invalid field. I have the code in place to make it happen but the problem is that the focus is not being placed on the field in IE 10 (yet it is being placed in Firefox).
placefocusonfirstinvalidindexfield();
// After an attempt to upload has failed due to one or more invalid fields, then place the input focus automatically on the first
// invalid field:
function placefocusonfirstinvalidindexfield() {
var hasattemptedupload = '#Model.HasAttemptedUpLoadNumeric';
if (hasattemptedupload == 1) {
var indexfirstinvalidfield = '#Model.GetIndexOfFirstInvalidField()';
// focusIndexField(indexfirstinvalidfield);
setTimeout(focusIndexField(indexfirstinvalidfield), 100);
}
}
function focusIndexField(fieldindex) {
var control = document.getElementById("field" + fieldindex);
control.focus();
}
In the code above, I have confirmed that the correct field is being referenced. Everything appears to be as it should, except at the end of process, IE10 does not place the focus on the referenced field. Why not and what would I have to do to make that happen?
Just attempted this in the console to test in IE. The following code worked fine when testing focus on the "Post your answer" text area on this page.
setTimeout(function() { document.getElementById("wmd-input").focus() }, 5000);
Maybe there is something else in your code interfering with the focus? Have you tried extending the timeout value to see if it has something to do with that?
You are trying to haxx around the DOM loading with this row right?
setTimeout(focusIndexField(indexfirstinvalidfield), 100);
That row doesn't work as you expect. The focusIndexField is executed instantly and the response of the function is delayed 100 ms by the setTimeout function.
This would work as you expect:
setTimeout(function() {focusIndexField(indexfirstinvalidfield)}, 100);
However, it's not a good solution. The code should be executed when the document is ready instead.
Working on a rather large custom backend system that we've made for a local Chamber of Commerce and one of the things we need is to halt them from clicking on sub-form links (that post on a separate page) to populate content and lose the changes or information they've entered up until that point.
The forms are rather large, 30 or more fields generally. Previously I simply did a check using Coldfusion by passing a simple variable in the url based on what kind of page they were on (New vs Edit) but obviously as things grew more sophisticated this kind of basic approach was unsatisfactory.
It has to be dynamic.
So basically, if the user makes any changes on an edit page and attempts to click "add new address" in the business address section it will detect the changes made (hard part), and will disable the link (which is the easy part) to add a new address until he saves the main form by doing a submit (which loops back to the same page).
Simply using the onChange attributes for the fields won't work, as quite a few are already using this for some function or another.
I've tried messing with a few different scripts out there, many of them involving the $(":input") filter.
This fiddle here: http://jsfiddle.net/AFahj/50/
var propertyChangeUnbound = false;
$("#testbox").on("propertychange", function(e) {
if (e.originalEvent.propertyName == "value") {
alert("Value changed!");
}
});
$("#testbox").on("input", function() {
if (!propertyChangeUnbound) {
$("#testbox").unbind("propertychange");
propertyChangeUnbound = true;
}
alert("Value changed!");
});
This fiddle code is broken into two parts. One for more modern browsers (lower) and older pre IE9 crap (upper).
It demonstrates the basic functionally I'm wanting, but the issue is the scope of the forms themselves. They're massive. I need something that is flexible enough to run out and grab all of the inputs in a single script and be ready to perform an action based on changes.
So how would I create a single script that can watch if any of the inputs have been edited (even if there are alot of them) and perform an appropriate action?
jQuery's pseudo-selector :input is your friend here.
It selects all form inputs, including select boxes, textareas, and other inputs.
In the past I've used a snippet like this.
// give 500 ms delay before detecting changes to allow
// allow programmatic changes to input values
setTimeout(function() {
$(":input").on('keydown change', function(e) {
// when the change happens attach your event to deal with it
$(window).on('beforeunload', function(e) {
return "It seems you have unsaved changes. If you continue they will be lost";
});
// then remove the change detection (since we know it has changed already
$(":input").off('keydown change');
});
// Allow the thing to happen in certain circumstances.
$("form").on('submit', function() {
$(window).off('beforeunload');
});
}, 500);