3

I have a function like that :

function whenEmpty(field) {
  if (field.value == '') {
     field.style.backgroundColor = "#ffcccc";
     alert("Please fill the field.");
     field.focus();
  } else {
     field.style.backgroundColor = "#ffff80";
  }
}

Before I thought about that idea (I want to call this function when tab key is pressed. ) I call the function on attribute onblur. 

<tr>
  <td>
    <div class="required">
      <label>Phone</label>
    </div>
  </td>
  <td>
    <form:input path="connote.destPhone" id="destPhone" htmlEscape="true" onfocus="this.select();" onmouseup="return false;" onblur="whenEmpty(this);" style="background-color:#ffff80" size="20" maxlength="50" tabindex="9" />
    <form:errors path="connote.destPhone" cssClass="error" />
  </td>
</tr>

But now I want call that function only when I press tab.

Hakan Fıstık
  • 16,800
  • 14
  • 110
  • 131
kumala nindya
  • 69
  • 1
  • 1
  • 10
  • Possible duplicate of [Capturing TAB key in text box](http://stackoverflow.com/questions/3362/capturing-tab-key-in-text-box) – squaleLis Jan 26 '16 at 08:19

2 Answers2

5

You can add an event listener to the document like so.

document.addEventListener('keyup', function(event) {
  if (event.keyCode == 9) {
     whenEmpty();
  }
});

This will listen for any keyup (keyboard button released) events, and then in the if check what the keycode of the pressed button was. 9 is the keycode for Tab. If you want to pass the field to the function, you could also add the event listener to the input itself. Then access it with event.target

GMchris
  • 5,439
  • 4
  • 22
  • 40
  • how must I place the code? I have tried the code but no changes when I press the tab key when the field is empty. – kumala nindya Jan 26 '16 at 08:43
  • Well in this particular case, you could keep your whenEmpty function as it is, and do the following steps. Get all the inputs using a class name. Here I've given the input the class 'required-input' and got them: var inputs= document.getElementsByClassName('required-input'); then cycled through them add attatched an eventListener to all of them which will only go into the whenEmpty method if the Tab key was pressed. for (var i= 0; i < inputs.length; i++) { inputs[i].addEventListener('keyup', function(ev) { if (ev.keyCode === 9) { whenEmpty(ev.target); } }); } – GMchris Jan 26 '16 at 08:59
  • must I keep my parameter in whenEmpty function? – kumala nindya Jan 26 '16 at 09:00
  • I would advise attaching ALL events using addEventListener, including the onblur and onfocus that are currently on the element. If you do this, however, the parameter inside whenEmpty won't be the html element, instead it's an event object, and to access the html you'd need to ask that event object for it's target property. – GMchris Jan 26 '16 at 09:03
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/101672/discussion-between-kumala-nindya-and-gmchris). – kumala nindya Jan 26 '16 at 12:34
2

You can add a keyup listener on body or you can add listener on your table(just if you add tabindex attribute )

// event listener for keyup
function checkTabPress(e) {        
    if (e.keyCode == 9) {
     //call your function whenEmpty()
    }
}

var body = document.querySelector('body');
body.addEventListener('keyup', checkTabPress);
Vladu Ionut
  • 8,075
  • 1
  • 19
  • 30