Question

当前，我的tr:inputText仅在按下按钮后才能提交。当我点击输入文本上的回车按钮时，我试图使其也提交。它似乎尝试听，但事实并非如此。任何帮助将非常感激。

起初，我尝试使用内置的特立尼达功能来实现此目的，但现在我正尝试使用JavaScript来实现此目的。我该怎么办？

<SCRIPT LANGUAGE="JavaScript">		
		    function enter(event) {
		        var acctNumber = document.getElementById('acctNumber');
		        acctNumber.addEventListener('keypress', function enter(event))
		         {
		            if (event.keyCode == 13) {
			            
		                   <!-- document.getElementById('Search').click();-->
		                 <!--   document.send.submit();    -->
		                 submitForm();
		                }
		        }
		    }

			function submitForm() {
				$('#send').submit();
			}
			
			</SCRIPT>
			
	<ui:composition template="#{processPanelLayoutManager.layoutTemplate}">

		<ui:define name="processTitle">		
		</ui:define>
		<ui:define name="processPanel">
			<tr:form usesUpload="true"	id="send" >
				<trh:tableLayout width="100%" cellPadding="10" borderWidth="0"
					id="Table">

					<trh:rowLayout>
						<trh:cellFormat columnSpan="4">
							<ocau:inlineMessage />
						</trh:cellFormat>
					</trh:rowLayout>
									
					<tr:panelBox styleClass="roundedPanelPrimary">
						 <trh:rowLayout halign="center">
							<trh:cellFormat halign="center">								
								<tr:inputText styleClass="tabdata" contentStyle="normalContent"
								   id= "acctNumber"
									label="Account Number"
									type="enter" 
									value="#{fraudSearch.fraudCustomerReqtUIModelBean.accountNumber}"
								>
	                               
							   </tr:inputText>

							</trh:cellFormat>
							
							<trh:cellFormat halign="left">
								<tr:commandButton text="Search" id="Search"
									action="#{fraudSearch.getIBSNotesData}" styleClass="Button"
									halign="center"
								
									>
									</tr:commandButton>
							</trh:cellFormat>							
						</trh:rowLayout>						
					</tr:panelBox>

					<tr:panelBox styleClass="roundedPanelPrimary"
						rendered="#{fraudSearch.displaySearchResults}">
						<trh:tableLayout cellPadding="10" borderWidth="0" id="Table"
							width="100%">
							<trh:rowLayout>
								<tr:panelTabbed position="above" inlineStyle="width:auto">

									<tr:showDetailItem text="IBS Data Extract" id="IBSDataExtract"
										immediate="true">
										<ui:include
											src="/pages/recovery/fraud/displayFraudRPAIBSDataExtract.jspx">
										</ui:include>
									</tr:showDetailItem>
								 <!--  
									<tr:showDetailItem text="Non-Monetary Data" id="IBSNonMonData"
										immediate="true">
										<ui:include
											src="/pages/recovery/fraud/displayFraudRPANonMonetaryData.jspx">
										</ui:include>
									</tr:showDetailItem>
									-->
								</tr:panelTabbed>
								
								
								
								
							</trh:rowLayout>
						</trh:tableLayout>
					</tr:panelBox>
				</trh:tableLayout>


			</tr:form>
			
		</ui:define>

	</ui:composition>
	<script language="javascript">
		document.forms["send"].focus();
	</script>

Answer 1

您的事件侦听器似乎语法不正确；您将第二个括号放在事件参数之后，而不是在该块的右花括号之后。

您还可以在脚本标记中包含HTML注释-将其更改为与JS兼容的注释。

我在this codepen中对此进行了修改，并且事件侦听器正在工作。

并使用原始脚本：

<SCRIPT LANGUAGE="JavaScript">		
		    function enter(event) {
		        var acctNumber = document.getElementById('acctNumber');
		        acctNumber.addEventListener('keypress', function enter(event)
		         {
		            if (event.keyCode == 13) {
			            
		                 // document.getElementById('Search').click();
		                 // document.send.submit();  
		                 submitForm();
		                }
		        });
		    }

			function submitForm() {
				$('#send').submit();
			}
			
			</SCRIPT>

此外，为避免将来出现此类问题，我建议您注意以下几点：

检查控制台日志；这个错误非常明显
尽可能使用严格相等（===），以避免不必要的错误
通过lint运行代码

按下Enter时如何提交tr：inputText javascript

1 个答案: