Having problems setting focus on your input boxes?

December 13th, 2012 by admin Leave a reply »

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.

Advertisement

Leave a Reply