-2

I have a classic case of an input that is cleared when gaining focus.

The problem is that when user goes to copy some data from a spreadsheet e.g. and comes back to add this data to the input, the focus event of the input is triggered and whatever they typed is cleared.

How to prevent onfocus from being triggered when it is due to a browser window focus and not from a click on the input, a tab, the click of a label, or any traditional action in the page?

NO JQUERY PLEASE.

EDIT: OK apparently some people like to vote negatively every time a post does not have some code. So if you need a code to grasp this simple idea, here it is:

<input type=text onfocus="this.value=''">
FlorianB
  • 2,188
  • 18
  • 30
  • 2
    Why is the data cleared on focus ? – adeneo Oct 02 '16 at 18:51
  • Where's your code? – j08691 Oct 02 '16 at 18:51
  • how can anyone help fix a behavior in code they can't see? Provide a [mcve] – charlietfl Oct 02 '16 at 18:55
  • Why don't you use onclick event instead of onfocus. Random thought – Cyclotron3x3 Oct 02 '16 at 19:10
  • @Cyclotron3x3: thanks but many issues come with onclick: first, there are many ways to gain focus (as mentioned) and even worst: user can click to relocate cursor. – FlorianB Oct 02 '16 at 19:11
  • but why would it be focused when the window is focused? this only happens with `autofocus` form fields – vsync Oct 02 '16 at 19:11
  • @vsync: no it does not. If you leave the window for another program, and focus the browser window again, onfocus is triggered. – FlorianB Oct 02 '16 at 19:12
  • @Cyclotron3x3 - `onclick` isn't good since a user can change fields using `tab` key or use `tap` event, or who knows what – vsync Oct 02 '16 at 19:12
  • @FlorianB - I don't see this happening in this [**Demo page**](https://output.jsbin.com/waxeme) – vsync Oct 02 '16 at 19:14
  • @vsync: I do, and I just tried with both Firefox and Chrome. – FlorianB Oct 02 '16 at 19:15
  • @FlorianB - try to make another input with `autofocus` – Dimava Oct 02 '16 at 19:15
  • @FlorianB - well, at least 2 others needs to verify this. I see no reason for this to happen. – vsync Oct 02 '16 at 19:15
  • 2
    Possible duplicate of [Changing browser tabs undesirably fires the focus event, especially in Google Chrome](http://stackoverflow.com/questions/10657176/changing-browser-tabs-undesirably-fires-the-focus-event-especially-in-google-ch) – Robiseb Oct 02 '16 at 19:15
  • @FlorianB - if you place another input and give it `autofocus` attribute, does your original input still gets focused? – vsync Oct 02 '16 at 19:17
  • autofocus does not fix the problem because it is not for window gaining focus but for page loading. – FlorianB Oct 02 '16 at 19:20

1 Answers1

1

Technically, switching windows does cause the element to lose/regain focus. This, of course, triggers the focus event handler. There's no way to differentiate between what caused the focus event to happen.

If you want to clear the field only when it's manually selected, use the click event instead:

<input type=text onclick="this.value=''">

You can detect if the page loses focus. It might be possible to use that to infer whether the input should be cleared or not when it regains focus. I'm not sure if event order matters or if event order is different based on the browser involved.

<input type=text>

donotclear = false;

addEventListener('blur',function(e){
  donotclear = true;
});

document.getElementsByTagName('input')[0].addEventListener('focus',function(e){
  if(donotclear) {
    donotclear = false;
  } else {
    this.value = '';
  }
});
Ouroborus
  • 16,237
  • 4
  • 39
  • 62
  • 1
    As mentioned earlier, the onclick brings many problems: 1. Input can be selected with tab or label e.g. 2. Relocating the cursor is also a click. – FlorianB Oct 02 '16 at 20:37
  • @FlorianB Updated – Ouroborus Oct 02 '16 at 20:54
  • thanks, I thought about that solution, it would probably be the least dirty one :) Hmm I like the idea of setting donotclear=false when the inputs gets the focus, and not trying to detect when we are coming back to the window and then setting it with a timeout... – FlorianB Oct 02 '16 at 21:51