Focus / blur feature

Hi saxonycreative,

There is really only one way to go about this, and that is to use javascript.

var searchNodes = document.getElementsByName('s'); //get all search fields
for(var i=0; i<searchNodes.length; i++){
  //apply onfocus action to each one in turn
  searchNodes[i].addEventListener('focus', function(e){
    e.target.value = ''; //delete value
    e.target.removeEventListener(e.type, arguments.callee); //only do it the first time
  });
}

Note: this should be done at least after the document ready event has been fired.

To add this to your theme, either add it to an already existing bespoke js file or create a new one and enqueue it in your functions.php.

If your theme is a third party one, you’ll need to add this as a plugin to avoid the same issue of updates overwriting your changes. It can be just a short file naming the plugin and enqueuing the script – see here.

All that said, I would make sure this change is absolutely necessary before employing it. Many modern browsers come with a button to delete the existing value or highlight it by default on focus (hence making it easy to delete). However, immediately deleting on focus means that someone cannot easily edit their previous query and more often than not this is poor UX.

Hope this helps.

Cheers,
Joe

P.S. I am marking this topic as resolved as this is a theming issue and outside the remit of this plugin.

Sorry this topic appears as resolved. I have tried about ten times to post my proper reply to this question and it has not appeared. I don’t know what’s going on. I’ll leave it a little bit and try again, but this is very frustrating.

Hi saxonycreative,

There is really only one way to go about this, and that is to use javascript.

var searchNodes = document.getElementsByName('s'); //get all search fields
for(var i=0; i<searchNodes.length; i++){
  //apply onfocus action to each one in turn
  searchNodes[i].addEventListener('focus', function(e){
    e.target.value = ''; //delete value
    e.target.removeEventListener(e.type, arguments.callee); //only do it the first time
  });
}

Note: this should be done at least after the document ready event has been fired.

To add this to your theme, either add it to an already existing bespoke js file or create a new one and enqueue it in your functions.php.

If your theme is a third party one, you’ll need to add this as a plugin to avoid the same issue of updates overwriting your changes. It can be just a short file naming the plugin and enqueuing the script – see here.

All that said, I would make sure this change is absolutely necessary before employing it. Many modern browsers come with a button to delete the existing value or highlight it by default on focus (hence making it easy to delete). However, immediately deleting on focus means that someone cannot easily edit their previous query and more often than not this is poor UX.

Hope this helps.

Cheers,
Joe

P.S. I am marking this topic as resolved as this is a theming issue and outside the remit of this plugin.

Yeah, Safari has become the new Internet Explorer. It’s infuriating the number of scripts and styles I have to write because Safari is so far from standards compliant. What makes it worse is that Chromium and Safari run from the same engine, so it’s almost as if they’re deliberately putting the bugs in.

Good to hear you got it sorted.

Cheers,
Joe