Responsive page using vue

Community feedback

• 

  Dipu•430

  @immdipuPosted over 1 year ago

  its awesome. you can make it more better by adding a clear button to clear the input.

  1

  ---

  

  Felipe Stefani•330

  @felipestefaniPosted over 1 year ago

  @immdipu it's really true!

  To UX, this clear button could make a great difference! Thank you for the tip! 💫

  0
• 

  UmerAsad•30

  @UmerAsad2077Posted over 1 year ago

  amazing, how did you make it so that the next input gains focus as soon as the previous one is filled?

  1

  ---

  

  Felipe Stefani•330

  @felipestefaniPosted over 1 year ago

  @UmerAsad2077 How are you? 😉

  I added an id to each input and a listener as well that is called every time any key is pressed (key up).

  The verification does:

  • Check the size of the input value when a key is released;
  • if the size of the input is equal 2, then I focus the next input

  For example (I did it in Vue, ok?! JS vanilla or react isn't much different):

  the code bellow, represents my day and month input, with the id="day" and id="month", respectively

   <input :class="{error: dayError}" id="day" type="text" pattern="\d*" placeholder="DD" maxlength="2" v-model="day" @keyup="checkDaySize">
   <input :class="{error: monthError}" id="month" type="text" placeholder="MM" maxlength="2" v-model="month" @keyup="checkMonthSize">
  

  every time I click the verification is called, and then, the logic does:

  • not allow insert any key that isn't a number;
  • remove error, if any; and finally
  • check if the day value length is equal 2, and then focuses the next input (in this case, the input with id="month", else does nothing

   const checkDaySize = () => {
      day.value = day.value.replace(/\D/g, '')
      day.value.length >= 1 ? dayError.value = '' : '' 
      day.value.length  == 2 ? document.getElementById('month').focus() : ''
    }
  

  I don't know if I could explain myself well 😅! But if you have any doubts yet, just tell me and I try to say another way ☺️

  0

  

  UmerAsad•30

  @UmerAsad2077Posted over 1 year ago

  @felipestefani i really appreciate that you took the time to reply, this was extremely helpful 👍

  1