Using jQuery to add/remove attributes if another attribute is added/removed

Question

I have a bunch of textbox elements which the readonly attribute gets added to and removed from based on a bunch of different conditions.

Users have complained that pressing the Tab key gets them 'stuck' on a textbox that is readonly.

I want to now add tabindex='-1' whenever I set readonly='readonly', and then remove the tabindex attribute whenever I remove the readonly attribute.

Is there a global event that I can use to do this? I'm trying to avoid finding every instance where it occurs and doing it manually.

Events are not fired when attributes are added or removed. You should manually call a function to add tabindex when you set readonly.. — Yuri
– Yuri, Commented Jun 24, 2016 at 14:04
I wondered. I should have said function instead of event. But you get what I meant :) — notAnonymousAnymore
– notAnonymousAnymore, Commented Jun 24, 2016 at 14:05
why don't you change that attr at the same time are changing the readonly? — DaniP
– DaniP, Commented Jun 24, 2016 at 14:07
$('input').attr('readonly').each(function(e){$(e).attr('tabindex','-1')}); — Naga Sai A
– Naga Sai A, Commented Jun 24, 2016 at 14:09
@DaniP, that's what I was doing. It occurs about 50 times. I could have finished by now instead of taking time to ask this question but I was just curious if there was some elegant solution. — notAnonymousAnymore
– notAnonymousAnymore, Commented Jun 24, 2016 at 14:13

cFreed · Accepted Answer · 2016-06-25 21:12:59Z

1

Instead of modifying tabindex each time you set/unset readonly on an element, you might use a different strategy:

Bind all involved elements to a focus handler
Then, if the element is readonly, merely trigger a tab strike

Something like this (to refine depending on your context):

$('.involved-element').focus(function() {
  if (!$(':enabled', this)) {
    $(document).trigger({type:'keydown', which:9});
  }
}

answered Jun 25, 2016 at 21:12

cFreed

4,4641 gold badge26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using jQuery to add/remove attributes if another attribute is added/removed

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related