I have a html template that contains a table and rows which looks like this below
<td> <label class="pull-left" data-link="productname<%= elId %>"><%= ProductName %></label> <input class="hidden-phone input-large" id="productname<%= elId %>" type-id="Id" type="hidden" /> <a id="mobileRef" href="#mobileModal" role="button" class="visible-phone pull-right" data-toggle="modal">Edit...</a> </td> <td class="hidden-phone"> <label data-link="Rate<%= elId %>"><%= Rate %></label> <input id="Rate<%= elId %>" type-id="Rate" class="input-small" value="<%= Rate %>" /> </td> <td class="hidden-phone"> <label data-link="RateUnit<%= elId %>"><%= RateUnit %></label> <select id="unitsSelector<%= elId %>" type-id="RateUnit" class="input-mini" style="width: auto; min-width: 80px;" > <option value="<%= RateUnit %>"><%= UnitAbbr %></option> </select> </td> <td class="hidden-phone"> <label data-link="Cost<%= elId %>"><%= Cost %></label> <input id="Cost<%= elId %>" type-id="Cost" class="input-mini" value="<%= Cost %>" /> </td> <td class="hidden-phone"> <label data-link="TotalProduct<%= elId %>"></label> <div id="TotalProduct<%= elId %>" type-id="TotalProduct" class="input-mini">0</div> </td> <td class="hidden-phone"> <label data-link="TotalCost<%= elId %>"></label> <div id="TotalCost<%= elId %>" type-id="TotalCost" class="input-mini">0</div> </td>
The problem was that when I set focus using Jquery’s focus() like so:
selectAll: function(id)
{
//this works but gets overridden by something else
$(id.currentTarget).focus();
}
So what I had to do was use the focusin() method outlined here: http://api.jquery.com/focusin/
This seems to set the focus to only the input field and ignores any other focusing that is going on, I hope this helps someone.