How to category Design category Development category News category

Mobile Safari / iOS input field event sequences

Just a quick article to confirm my recent findings about the way input fields emit events within the default browser. The rather sparse documentation available from Apple did little to make it clear how this shakes out, so time to run some tests.

I have a list of HTML input boxes and need to watch the user focus move from one to the next. Having used a global handler for focus things didn’t work as expected within my script. It became clear that handlers need to be assigned to those elements individually.

During my tests I also observed that there are some extended events at play and thought it would be good to take note of these for the future…

The events watched were – (i’ve left out click since this behaves as expected)

  • blur
  • focus
  • change
  • input
  • keydown
  • keyup
  • keypress

When an element is first clicked on the following events are triggered focus (from the clicked element)

If you hit the *next*

  1. blur (from the element already in focus)
  2. focus (from the new element)

Hitting previous the same happens again, so blur/focus works well when handlers are assigned to the elements directly.

Now we key in a value to our input control – the following chain of events was observed –

  1. keydown
  2. keypress
  3. input
  4. keyup

If we now move to an alternate form element using next the following events are fired – the same events are fired when we click onto another input control.

  1. change
  2. blur
  3. focus (on the new element)

Might not seem that significant, but knowing when and which events are emitted and the fact that global handlers are not available may be helpful to you.

Craig

Craig enjoys producing usable and friendly sites that look great and function well. He often also experiments with workflow automation and owns and runs web-engineer.

qr code

Comments are closed.