Placeholder Text Comparison (v2)

Revision 2 of this benchmark created by Sam on

Preparation HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>

<input type="text" id="site_search_keyword" value="Search" placeholder="Search" />

Test runner

Ready to run.

Testing in
TestOps/sec
Apply JS Placeholder Anyway
var $siteSearchInput = $('#site_search_keyword');
var defaultSearchVal = $siteSearchInput.val();
$siteSearchInput.bind('focus', function() {
 if ($(this).val() == defaultSearchVal) {
  $(this).val('');
 }
}).bind('blur', function() {
 if ($(this).val().replace(/^\s+|\s+$/g, '') === '') {
  $(this).val(defaultSearchVal);
 }
});
ready
Check Native Placeholder Support, Clear Label if Supported
var $siteSearchInput = $('#site_search_keyword');
if (!('placeholder' in document.createElement('input'))) {
 //fallback for browsers that don't support the placeholder attribute
 var defaultSearchVal = $siteSearchInput.val();
 $siteSearchInput.bind('focus', function() {
  if ($(this).val() == defaultSearchVal) {
   $(this).val('');
  }
 }).bind('blur', function() {
  if ($(this).val().replace(/^\s+|\s+$/g, '') === '') {
   $(this).val(defaultSearchVal);
  }
 });
} else {
 $siteSearchInput.val('');
}
ready
Check Native Placeholder Support, Don't Do Anything if Supported
if (!('placeholder' in document.createElement('input'))) {
 //fallback for browsers that don't support the placeholder attribute
 var $siteSearchInput = $('#site_search_keyword');
 var defaultSearchVal = $siteSearchInput.val();
 $siteSearchInput.bind('focus', function() {
  if ($(this).val() == defaultSearchVal) {
   $(this).val('');
  }
 }).bind('blur', function() {
  if ($(this).val().replace(/^\s+|\s+$/g, '') === '') {
   $(this).val(defaultSearchVal);
  }
 });
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.