How to focus the first input field ?
sandy4you Nov 7, 2012 7:35 AMHi Everybody,
I need to focus the first input element on a given page which is decided at runtime as well as the number of fields.
Code snippet is below:
<composite:implementation>
<h:panelGroup id="wflPgPnl" layout="block"
rendered="#{workflowController.currentPageStatus.page.id == cc.attrs.pageId}">
<div id="msg_globalWfErrors">
<h:messages globalOnly="true" style="color:red"/>
</div>
<h:inputHidden id="wfxMessageArea"/>
<h:message for="wfxMessageArea"/>
<div style="">
<composite:insertChildren/>
</div>
// Some control buttons code here....
</h:panelGroup>
<script type="text/javascript">
/* <![CDATA[ */
function reassignTabOrders() {
var tabindex = 100; //start with 100 to not mixup with manually assigned ids (1-100 & >1000)
$("div[id$='wflPgPnl']").find('input,select,textarea').each(function() {
var $input = $(this);
if ($input.is(':visible')) {
if ($input.attr('tabindex') == 0) {
$input.attr("tabindex", tabindex);
//$input.tabIndex = tabindex;
tabindex++;
}
}
});
}
// ensure all elements have an tabIndex assigned
// otherwise tabbing from element without to an element with tabIndex does not work.
jQuery().ready(reassignTabOrders());
// This script is used to focus the first input field on the given/opened page. If the input field is a data
// picker then the focus will not be given to that field.
$(document).ready(function(){
$("div[id$='wflPgPnl']:not[id*='Picker']input:visible:first:enabled").focus();
});
/* ]]> */
</script>
</composite:implementation>
The tab index works fine.
But the focus of the input field is not working and also it breaks the application in IE when the application is executed through automated testing tool (Tosca).
Any help or hint will be highly appreciated.
Thanks a lot in advance.
Regards,
Sandy