Keep input values unchange in browser without depending on browser - javascript

Values entered by the user in <input/> are required to be kept unchanged after refreshing the page.
The browser dependency is expected be avoided in order to keep the cross browser compatibility.(For example: cookies, localStorage are not solution for this.) any one let me know how this can be achieved. JavaScript, Jquery can be used, but it should be browser compatible.

This should get you started. You can add text to the URL using the # sign in the URL without navigating away from the page. Then when reloading the page, you can pull the text back off of the URL.
HTML and Javascript Code:
Type something in the box below and then refresh the page:<br>
<input type="text" id="myTextBox" onkeyup="saveValue();">
<script type="text/javascript">
var originalLocation = document.location.href;
var myTextBox = document.getElementById('myTextBox');
function saveValue(){
document.location.href = originalLocation + "#" + myTextBox.value;
}
if(document.location.href.indexOf("#") > -1){
myTextBox.value = document.location.href.split("#")[1];
}
</script>

Here is a quick demonstration using localStorage (which is available in all browsers except IE<=7) that relies on this basic plugin for serializing and restoring form values. Try refreshing the page after typing some information into the inputs:
HTML:
<form>
<label for="name">Name:
<input type="text" id="name" name="name" />
</label>
<br/>
<label for="email">Email:
<input type="text" id="email" name="email" />
</label>
</form>
JS:
$(':input').on('input change keyup', function(){
localStorage.formData = JSON.stringify($('form').values());
console.log(localStorage.formData);
});
if(localStorage.formData){
$('form').values(JSON.parse(localStorage.formData));
}

Related

How to disable Chrome's saved password prompt setting through JavaScript

Is there any way to manipulate Chrome settings with the help of JavaScript or jQuery? I want to disable the save password pop-up bubble using JavaScript. How to do this?
Now I am going to give answer on my own question.
It can be done in both chrome as well as in mozilla fire fox.
For Chrome
First of all you must have to remove the attribute "password" of input type.
The main reason behind this is when you take input type = "text" and input type = "password" major browser shows that pop up. Because browsers have inbuilt functionality to show that pop up when you take input type = "password".
Now we can manipulate chrome from this.
Here is an example
<html>
<head>
<title> Remove Save Password Pop Up For Chrome </title>
<style>
#txtPassword{
-webkit-text-security:disc;
}
</style>
</head>
<body>
<input type="text" id="txtUserName" />
<br />
<input type="text" id="txtPassword" />
<br />
</body>
</html>
It is css property that is used for changing text into bullets.
For Mozilla
You cannot do this in mozilla. Because -moz-text-security is obsolete. It is not working in mozilla.
But we can also manipulate mozilla.
Now there are list of character codes in html that is supported in all of the major browsers.
From that character code for bullet is '•'. When you write this code in html it will print bullet like this "•"
Now we can replace the text field with these bullets
But there is one limitation for this. You cannot print bullets inside the text box. But there is also solution for that limitation. Because everything is possible in programming world.
For that limitation we can make fake div that shows bullets when you write password.
Here is an example.
<html>
<head>
<title> Remove Save Password Pop Up For Mozilla </title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript">
<script>
function RemoveSavedPassword() {
if (jQuery.browser.webkit == undefined) {
inputValue = $('.real-input').val();
numChars = inputValue.length;
showText = "";
for (i = 0; i < numChars; i++) {
showText += "•";
}
$('.fake-input').html(showText);
}
}
</script>
</head>
<body>
<div class="input-box">
<label>Enter password:</label>
<div class="fake-input"></div>
<input type="text" onKeyUp="RemoveSavedPassword()" class="real-input">
</div>
</body>
</html>
Now there is magic of CSS. Magic means power of margin, padding, opacity and position attribute we can manipulate user.
Here is the link:
http://codepen.io/jay191193/pen/bVBPVa
Security Issue
For security issue of input type="text" instead of input type="password" you can visit this link:
Security issue of changing type="password" into type="text"
There isn't a way to change Chrome settings directly from JavaScript, so the following answer will focus on how to prevent that dialog from appearing for a specific HTML form.
There aren't any great ways to do this as far as I can tell - from what I've read, the HTML5 autocomplete="off" attribute gets ignored in Chrome, so it will prompt to save the password even if you supply the attribute.
There is a workaround though - if you set the password field to be readonly until it is focused, Chrome will not prompt to save the credentials. Unfortunately there is no good clean solution that I know of, so that's why the solution I am posting is a little hacky.
Please view the JSFiddle in Chrome and try submitting each form to see the solution in action (you will need to reload the fiddle after you submit each time): https://jsfiddle.net/g0e559yn/2/
Full Code:
/* Chrome does not ask to save the password from this form */
<form id="form1" action="/">
Name:<br />
<input type="text" name="userid" />
<br />
Password:<br />
<input type="password" readonly onfocus="$(this).removeAttr('readonly');" />
<br />
<button type="submit" form="form1" value="Submit">Submit</button>
</form>
/*Chrome asks to save the password from this form */
<form id="form2" action="/">
Name:<br />
<input type="text" name="userid" />
<br />
Password:<br />
<input type="password" name="psw" />
<br />
<button type="submit" form="form2" value="Submit">Submit</button>
</form>
I've had success preventing this popup by adding the type="button" attribute to the <button> that is kicking off the event.
I had understood browsers to accompany the "Do you want to save this login?" popup with any form submit, but I get this popup even when using a button outside a <form>. I am guessing that since a button by default is <button type="submit">, in some way clicking it is recognized as a form submit even if you're not using it in a <form>.
Tested in recent versions of Firefox, Chrome, Edge.
I think I found rough, but working method to prevent browser saving password prompt. It might be not really beautiful solution, but it worked for me.
Made with jQuery.
Hope it helps.
$('#modified span').on('click', function(e){
e.preventDefault();
$('#modified').submit();
});
//Clear the form on submit
$('form').on('submit', function(){
$('form input[type="text"], form input[type="password"]').val('');
});
#modified input[type="submit"]{
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<h1>Browser IS asking to save password</h1>
<input type="text" placeholder="Login"/>
<input type="password" placeholder="Password"/>
<input type="submit" value="Submit"/>
</form>
<form id="modified">
<h1>Browser IS NOT asking to save password</h1>
<input type="text" placeholder="Login"/>
<input type="password" placeholder="Password"/>
<span>
<input type="submit" value="Submit"/>
</span>
</form>
This method work for me in chrome and mozilla, Using this in my projects:
<input type="text" name="email" onfocus="this.removeAttribute('readonly');" id="email" placeholder="Email Address" class="form-control" email="required email" required="">
Add onfocus="this.removeAttribute('readonly');" in your input type after this it wont remember any saved password.
For Chrome and Firefox 2018
ONLY IF YOU USE AJAX:
After you check if login and password is ok, clear password input field:
$.post("/auth", {login: $("#login").val(), pass: $("#password").val(); }, function(data){
if (data == "auth is ok"){
// clear password field
$("#password").val(''); // <-- this will prevent browser to save password
}
});
use Ajax
$.post("process.php", {
user: txtuser,
pass: txtpass
}, function(data) {
//alert(data);
async: true //blocks window close
//location.reload();
//OR
//window.location.href = "your link";
});
There's another way to do this. I think it works on all frameworks.
As I've solved it in Java Spring Boot, I'll first give the solution for java spring boot projects.
You can turn off autocomplete by using autocomplete="off" attribute. But in many modern browsers this attribute does not make any effect. So, in this case, if we use one more thing under the input field then this problem can be fixed.
<input type="text" readonly id="username" name="username">
in spring boot we should write:
<html:text property="username" styleId="username" readonly="readonly"></html:text>
Now, by writing readonly we have disabled the save prompt. We must also use "text" as type for the password. So, it will be like this:
<input type="text" readonly id="password" name="password">
<html:text property="password" styleId="password" readonly="readonly"></html:text>
But this will make the password field visible. We need to show "********" in the password field. For this we will use a tricky method that is, we will use a font that makes each character look like small dots. So, we need to change into css content.
Download the “security-disc” font files/images from here. In spring boot, download the “security-disc” font/images files then define the font files inside WebContent under WEB-INF/fonts and font images under WEB-INF/images.
<style>
#font-face {
font-family: 'text-security-disc';
src: url('../WEB_INF/fonts/text-security-disc.eot');
src: url('../WEB_INF/fonts/text-security-disc.eot?#iefix') format('embedded-opentype'),
url('../WEB_INF/fonts/text-security-disc.woff') format('woff'),
url('../WEB_INF/fonts/text-security-disc.ttf') format('truetype'),
url('../WEB_INF/images/text-security-disc.svg#text-security') format('svg');
}
input.password {
font-family: 'text-security-disc';
width:15%;
margin-bottom:5px
}
</style>
If your directory path isn't found you can use
URL('<%=request.getContextPath()%>/WEB-INF/fonts/text-security-disc.eot');
Method 2:
Another method by which we can use to remove the password, also other values from the form. The values are stored in the browser in the form of a cookie, so if the cookies are deleted then the password, as well as other values, also deleted. So only we have to add a function to delete the cookies.
<script type="text/javascript">
function savePass() {
passVal = "password = "
+ escape(document.Frm.passWord.value)
+ ";";
document.cookie = passVal
+ "expires = Sun, 01-May-2021 14:00:00 GMT";
document.getElementById("show").innerHTML =
"Password saved, " + document.cookie;
}
function dltPass() {
document.cookie = passVal
+ "expires = Sun, 01-May-2005 14:00:00 GMT";
// Set the expiration date to
// removes the saved password
document.getElementById("show").innerHTML =
"Password deleted!!!";
// Removes the password from the browser
document.getElementById("pass").value = "";
// Removes the password from the input box
}
</script>
Here, we added an older expiration date in dltPass function. So, the cookie will be thought of as expired and will be deleted.
Finally, another simplest way of preventing browsers to remember password is, using autocomplete="new-password". By this the browser will give random password suggestions while filling the password field in any form. So the actual password will not be saved in the browser.

Executing javascript present in the value field of inputs - JavaScript

I have a form in html:
<form name="foo" action="http://localhost:3000/my_url" method="POST">
<input type="text" name="username" value="alert('hello')" >
</form>
I need to get that JavaScript in the value field for the input to execute, but only through the form's submit. The reason is that page is a template so I don't control it (can't have
<script>
var input = document.getElementsByName("username");
</script>
or any other <script>tag added to the page. I'm trying to prove that's possible an attack to take place over malformed <input> fields, specially using templates.
How can I have that Javascript to execute on the form submission? Remember I'm not allowed to modify the page content except for that piece.
Since I'm doing a POST that form, I can set the <input> field (and only the <input> field) to whatever I want.
I could do
username=<script>alert('hello')<script>
<input type="text" name="username" value="<script>alert('hello')<script>" >
or
username=window.onload = function() { alert('hello') }
<input type="text" name="username" value="window.onload = function() { alert('hello') }" >
I have thought about doing a
username=document.forms['myform'].onsubmit() = function() { alert('hello') }
<input type="text" name="username" value="document.forms['myform'].onsubmit() = function() { alert('hello') }" >
All of those are valid. However I need to get the Javascript in the tag to execute. How can I do that? The security flaw is how the` tag can be exploited if not properly sanitized. As per #guest271314 "requirement include adding tag ..."
When you use a template engine to render html content the server normally sanitize and escape it to prevent passive injection of cross site scripts or XSS for short.
Such attack can be easily achieved on a server that does not enforce the previously mentioned security measures by posting malformed content that will happily be rendered later by the template engine.
For example a form that sends user input
<form name="foo" action="http://localhost:3000/my_url" method="POST">
<input type="text" name="username" value="" >
</form>
If the user sends something like "><script>alert('foo')</script> and later you display this input in another form
<form name="bar" action="http://localhost:3000/my_other_url" method="POST">
<input type="text" name="username" value="#template_engine_render(posted_username_value)#" >
</form>
The resulting output will be
<form name="bar" action="http://localhost:3000/my_other_url" method="POST">
<input type="text" name="username" value="">
<script>alert('foo')</script>
</form>
Because the "> caracters close the input tag and you will end up executing arbitrary user javascript code in your page.
This is why "Never trust user input" is one of the most basic security rules of the web.
Try utilizing Function
Note, submission of form at stacksnippets appear blocked; substituted click event for submit event; i.e.g., click on input at stacksnippets for value of input to be called as parameter to Function.
document.forms["foo"].onclick = function(e) {
Function(this.children[0].value)()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="foo" action="" method="POST">
<input type="text" name="username" value="alert('hello')" >
</form>

prefill text field using javascript

I have a simple javascript that I can't seem to get to work.
So what I'm trying to accomplish is a text field on my homepage that the user can type in(just 1 field). Submit it and it'll take them to another page with a text field that is pre filled with what they already typed in the first field.
<script type="text/javascript">
function go_page(page)
{
document.location.href = '/?page_id=11' + '#addressInput=' + addressInput;
}
</script>
When i fill in the 'addressInput' (for this example, lets say '90501')..
Currently, the url comes up as www.mywebsite.com/?addressInput=90501
Goal, i want it to be.. www.mywebsite.com/?page_id=11#addressInput=90501
This 'goal url' works when i type it in the address bar. I just need to figure out how to do that function automatically for the user..based on what they input in the first text field.
...any ideas?
EDIT 1
Here is the form code..
<form method="get" onsubmit=" go_page(this.page.value); return false">
<input type="text" name="addressInput" id="addressInput" size="30" />
<input type="submit" value="" class="submitButton" />
</form>
EDIT 2
just more info..
The user will be on the homepage and type in an 'address/zip code' in the text field and click submit.
Which will then take them to the locations page(page_id=11) that has a text field that's pre-populated with the 'address/zip' the user typed in on the homepage.
You could try grabbing the element in the form like this
<form method="get" onsubmit="go_page(this.addressInput); return false">
<input type="text" name="addressInput" id="addressInput" size="30" />
<input type="submit" value="" class="submitButton" />
</form>
And extracting the value of addressInput inside your function like this
function go_page(elem) {
var addressInput = elem.value;
window.location.href = "/?page_id=11#addressInput"+addressInput;
}
In Wordpress that should navigate you to the page id and add the hash to the end
Its not clear from the limited information provided, but have you stopped the default form submission behavior? Maybe the form if being submitted before your javascript is called. Capture the form submission and return:false or event.preventDefault() to stop it continuing with the submission.
If you want to have # in the URL, you have to encode it so instead of using # use %23. And do not forget that for separating values in URL you have to use &.
document.location.href = '/?page_id=11' + '%23addressInput=' + addressInput;
Update
Instead of document.location.href use window.location

Forcing cursor to go on text field

How do I make it so when my web page loads, the cursor automatically goes to a given text field? (For example, on Google when you load the page, the blinking cursor is already on the search box)
You need to use JavaScript. e.g.
<input type="text" id="search" />
<script type="text/javascript">
document.getElementById('search').focus()
</script>
Be careful implementing this functionality. It's very annoying for a user to focus on a field and start typing only to find the caret has been redirected while typing when the page finished loading. I've seen this happen on numerous sites.
I'd suggest using the HTML5 autofocus attribute and falling back to a JavaScript solution in browsers which don't support it. The following gets round the above problem by not waiting for the document to load before setting the focus:
<input type="text" name="search" id="search" autofocus>
<script type="text/javascript">
var input = document.getElementById("search");
if ( !("autofocus" in input) ) {
input.focus();
}
</script>
More information can be found at diveintohtml.org: http://diveintohtml5.ep.io/forms.html#autofocus
Try
<body onLoad="document.form1.txtBox1.focus()">
Since HTML5 is in full force, I believe autofocus is well supported. I would take heed to the other answers here, but in my opinion, much easier than JavaScript:
<input type="text" name="name" autofocus>

Reloading page in IE 7 clears text from Input fields

I have a web page,with a text input which a user will enter some text. There is a hidden input element on the page that stores the values submitted,so as a user keeps entering values , they will be appended to the hidden input element, I then use the value stored here to output all values entered to the user, see the code below
<SCRIPT TYPE="text/javascript">
function get_val(val)
{
var name = val.input1.value;
if(document.getElementById("input2").value != "")
{
var new_name = document.getElementById("input2").value;
name = new_name.concat(" AND " +document.getElementById("input1").value);
document.getElementById("input2").value = name
alert(name);
history.go(0); //this will be explained below
}
if(document.getElementById("input2").value == "")
{
document.getElementById("input2").value = name;
}
}
</SCRIPT>
<h3>Enter word</h3>
<form id="frm1" name="frm1">
<input id="input1" name="input1" type="text" size="40" value="" />
<input id="input2" name="input2" type="hidden" size="40" value=""/>
<input id="button" name="button" type="button" value="get name" OnClick="get_val(this.form)"/>
</form>
Now note the history.go(0); line, I've put this in to demonstrate my problem. it works fine in most browsers, except sometimes in IE version 7.0.5730.1.3, when the page is reloaded, the hidden input element is cleared, causing undesirable results.
Does anyone know any reason why this occurs occasionally with Internet Explorer 7?
I'm not sure why IE7 behaves that way...but I don't like the idea of relying on any browser to save form field's value consistently or reliably.
Store the values in a cookie instead of a hidden element.
http://www.quirksmode.org/js/cookies.html
I think this is more like a feature of browsers, you shouldn't depend on. Rather use cookies or session variables to keep the fields.

Categories