CodePen

HTML

            
              <h1>Google</h1>

<input id="field" autofocus>
  
<p>When a website like Google auto-focuses the cursor into a text field, this basically <a href="http://www.sitepoint.com/dont-hijack-my-browser/">hijacks</a> the browser's back button functionality. This script fixes this problem.</p>
  
  <p>You can try a <a href="http://www.impressivewebs.com/google.com.html">raw version at this location</a>, but be sure to view another website first so you'll have something to go "back" to.</p>
  
  <p>Bonus: I've also added shift-backspace recognition, to have the ability to go forward, too.</p>
            
          
!
via HTML Inspector

CSS

            
              body {
  text-align: center;  
}

h1 {
  font-size: 50px;
  margin: 20px 0;
}

input {
  padding: 5px;
  width: 400px;
  margin-bottom: 20px;
}

p {
  width: 30%;
  margin: 20px auto;
  text-align: left;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var input = document.getElementById('field'),
    key;

input.onkeydown = function(e) {

  if (!input.value) {

    key = e.keyCode || e.charCode;

    if (key === 8 || key === 46) {

      if (!e.shiftKey) {
        history.back();
      } else {
        history.forward();
      }

    }

  }
 };
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................