Hi,
I know this is a browser specific issue but I just thought this is the best forum i know to bring the issue up.
Only in Chrome 44 version when I click on text box field and then press tab key , instead of going to next field the cursor moves to the URL of the browser.
It works in Mozilla, Chrome<44 versions.
This is my code screenshot:
Kindly help.
Wouldn't it be easier to just paste the code? Not to mention that if someone wanted to check it out for themselves they'd have to transcribe the code off the picture and nobody is going to do that.
Does it happen with a specific input or with any one? The browser will switch focus on keydown, so the onkeypress interceptors you have there aren't working correctly.
Hi Michal,
Sorry about the screenshot paste. Actually I have to code using client machine. So it takes a while to send code from client machine to my machine.
With input/no input the behaviour is same, the cursor gets moved to the URL.
Please find below the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--Display page to add vendors in the production -->
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="#{request.contextPath}/resources/framework/css/styles.css"
rel="stylesheet" type="text/css"></link>
</h:head>
<h:body>
<ui:composition>
<rich:popupPanel id="popup-add-vendor" modal="true" autosized="true"
resizeable="false" width="600"
style="top:95px;border-radius:21px;padding:0px;overflow:hidden;"
domElementAttachment="form">
<div id="header" style="white-space: nowrap;">
<table>
<tr>
<td><h:graphicImage name="framework/img/brand-logo.png"
alt="brand-logo" /></td>
<td><a4j:commandLink
style="color:white;margin-left:357px;font-size:20px;text-decoration:none;
border:1px solid;padding:1px 2px 1px 2px;line-height:50%;display:inline-table;"
action="#{addVendor.clearFields}" execute="@form"
render="popup-view-vendors"
oncomplete="#{rich:component('popup-add-vendor')}.hide();return false;">x</a4j:commandLink>
</td>
</tr>
</table>
</div>
<br />
<h:outputText value="#{fwlbl.add_vendor}"
style="font-size:24px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif; margin-left:228px;" />
<br />
<br />
<br />
<div id="textBox">
<h:outputText value="Vendor Number"></h:outputText>
<h:inputText id="vendorNbr" value="#{addVendor.vendorNbr}"
tabindex="0"
onkeypress="if(event.keyCode==9 ||event.which==9){event.preventDefault();document.getElementById('form1:division').focus();}"
style="margin-left:21px;margin-bottom:6px;" maxlength="12">
</h:inputText>
<br />
<h:outputText value="Division"></h:outputText>
<h:inputText id="division" value="#{addVendor.division}"
tabindex="1"
onkeypress="if(event.keyCode==9 ||event.which==9){event.preventDefault();document.getElementById('form1:country').focus();}"
style="margin-left:61px;" maxlength="4">
</h:inputText>
<br />
<h:outputText value="Country"></h:outputText>
<h:inputText id="country" value="#{addVendor.country}" tabindex="2"
style="margin-left:61px;text-transform:uppercase;" maxlength="5"></h:inputText>
<h:outputText value=" "></h:outputText>
<a4j:commandButton action="#{addVendor.getSKUCount}" execute="@form"
render="actSKU inactSKU" styleClass="buttonClass"
style="width:88px;margin-left:50px;" value="Get SKU Count">
</a4j:commandButton>
<a4j:commandButton value="Add" execute="@form"
render="tbl_viewvnd cmdBtn envTable" styleClass="buttonClass"
style="width:52px;margin-left:70px;" action="#{addVendor.add}">
<a4j:param name="envName" value="#{viewVendor.envNameLabel}"></a4j:param>
<a4j:param name="curractvSKUCnt"
value="#{viewVendor.curractvSKUCnt}"></a4j:param>
<a4j:param name="currinactvSKUCnt"
value="#{viewVendor.currinactvSKUCnt}"></a4j:param>
<a4j:param name="skuLimit" value="#{viewVendor.skuLimit}"></a4j:param>
</a4j:commandButton>
<br />
<h:outputLabel style="margin-right:13px;" value="Active SKU Count"></h:outputLabel>
<h:outputText id="actSKU" value="#{addVendor.indactSKUCnt}">
<f:convertNumber minFractionDigits="0"></f:convertNumber>
</h:outputText>
<br /> <br />
<h:outputLabel style="margin-right:7px;" value="Inactive SKU Count"></h:outputLabel>
<h:outputText id="inactSKU" value="#{addVendor.indinSKUCnt}">
<f:convertNumber minFractionDigits="0"></f:convertNumber>
</h:outputText>
<br />
</div>
<br></br>
<div id="footer">
<ui:insert name="footer">
Copyright of Stores Inc.,
<h:outputText value="#{now}">
<f:convertDateTime pattern="yyyy" type="date"></f:convertDateTime>
</h:outputText>
. All Rights Reserved.
</ui:insert>
</div>
</rich:popupPanel>
</ui:composition>
</h:body>
</html>
So pressing tab on anything focuses the URL bar? That doesn't look like a problem of the app, I don't think it's possible to focus the url bar with JavaScript.
As for the code, the error hardly concerns the entire page, reduce it to the few lines of code that cause the issue. (http://sscce.org) Though I'm not sure the problem is in the code.
I have three words for you Michal - "You are awesome!". Thanks!!!!!!!!!!!!! Keydown worked for me .. Yippieeeeeee!!!!!