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.
