Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Browser Back button (or history.back()) can break placeholder functionality (IE9) #58

Closed
sbull opened this issue Feb 24, 2012 · 2 comments
Closed

Browser Back button (or history.back()) can break placeholder functionality (IE9) #58

sbull opened this issue Feb 24, 2012 · 2 comments

Comments

@sbull
Copy link
Contributor

sbull commented Feb 24, 2012

There are certain navigation scenarios that can cause placeholder to fail. The following is an example.

<!DOCTYPE html>
<html>
  <head>
  <style>.placeholder { background-color:yellow; }</style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="jquery.placeholder.js"></script>
    <script type="text/javascript">
if (window.location.search != '') { window.history.back(); }
$(function(){
  $('input[placeholder]').placeholder();
  $('#submit_link').click(function(){ $(this).closest('form').submit(); });
});
    </script>
  </head>
  <body>
<form action="#submitted" method="get">
Text1: <input type="text" name="txt1" placeholder="text holder"></input><br />
<a href="#submit" id="submit_link">SUBMIT</a>
</form>
  </body>
</html>

To see the bug, put this in a directory index file, and click on SUBMIT while the placeholder is displayed (submits form to same file with get parameters "?txt1="). This example automatically navigates "back" after the form submit, and the bug is seen.

You can also see this bug by removing the "window.history.back();" line and manually using the browser's back button.
sbull added a commit to sbull/jquery-placeholder that referenced this issue Feb 24, 2012
@sbull
Apply placeholder functionality if value matches placeholder, to fix …
b477942 
…back button and refresh problems (IE9). Fixes mathiasbynens#58.
@sbull sbull mentioned this issue Feb 24, 2012
Closed
@sbull
Copy link
Contributor Author

sbull commented Feb 25, 2012

Lacking an acceptable solution for this in the actual placeholder code itself (see the comments in Pull Request #59), a trick like the following can be used as a workaround:

  $('input[placeholder]').placeholder().each(function(){
    var $input = $(this);
    if ($input.val() === $input.attr('placeholder')) {
      $input.val('');
    }
  });

Mathias, I'm wondering if you think it might be appropriate to add this as an option to the placeholder code? Either as a config option (similar to how a custom class name might be treated, $.fn.placeholder.removeIdenticalValues) or as an option/parameter to the .placeholder() call? Or if you think it might be desirable to run something like this by default during the .placeholder() call?

@amerikan
Copy link
Collaborator

You would have to call .placeholder() again when coming and it should work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Apply placeholder functionality if value matches placeholder, to fix bac... sbull/jquery-placeholder
2 participants
@amerikan @sbull