HTML :input text 的事件及方法

本文详细介绍了DOM中的各种事件如onactivate、onbeforeupdate及方法如addBehavior、appendChild等的功能和用途,帮助开发者更好地理解和应用这些事件和方法。
事件 描述
onactivate 当对象设置为活动元素时触发。
onafterupdate 当成功更新数据源对象中的关联对象后在数据绑定对象上触发。
onbeforeactivate 对象要被设置为当前元素前立即触发。
onbeforecut 当选中区从文档中删除之前在源对象触发。
onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即触发。
onbeforeeditfocus 在包含于可编辑元素内的对象进入用户界面激活状态前或可编辑容器变成控件选中区前触发。
onbeforepaste 在选中区从系统剪贴板粘贴到文档前在目标对象上触发。
onbeforeupdate 当成功更新数据源对象中的关联对象前在数据绑定对象上触发。
onblur 在对象失去输入焦点时触发
onchange 当对象或选中区的内容改变时触发。
onclick 在用户用鼠标左键单击对象时触发。
oncontextmenu 在用户使用鼠标右键单击客户区打开上下文菜单时触发。
oncontrolselect 当用户将要对该对象制作一个控件选中区时触发。
oncut 当对象或选中区从文档中删除并添加到系统剪贴板上时在源元素上触发。
ondblclick 当用户双击对象时触发。
ondeactivate 当 activeElement 从当前对象变为父文档其它对象时触发。
ondrag 当进行拖曳操作时在源对象上持续触发。
ondragend 当用户在拖曳操作结束后释放鼠标时在源对象上触发。
ondragenter 当用户拖曳对象到一个合法拖曳目标时在目标元素上触发。
ondragleave 当用户在拖曳操作过程中将鼠标移出合法拖曳目标时在目标对象上触发。
ondragover 当用户拖曳对象划过合法拖曳目标时持续在目标元素上触发。
ondragstart 当用户开始拖曳文本选中区或选中对象时在源对象上触发。
ondrop 当鼠标按钮在拖曳操作过程中释放时在目标对象上触发。
onerrorupdate 更新数据源对象中的关联数据出错时在数据绑定对象上触发。
onfilterchange 当可视滤镜更改状态或完成转换时触发。
onfocus 当对象获得焦点时触发。
onfocusin 当元素将要被设置为焦点之前触发。
onfocusout 在移动焦点到其它元素之后立即触发于当前拥有焦点的元素上触发。
onhelp 当用户在浏览器为当前窗口时按 F1 键时触发。
onkeydown 当用户按下键盘按键时触发。
onkeypress 当用户按下字面键时触发。
onkeyup 当用户释放键盘按键时触发。
onlosecapture 当对象失去鼠标捕捉时触发。
onmousedown 当用户用任何鼠标按钮单击对象时触发。
onmouseenter 当用户将鼠标指针移动到对象内时触发。
onmouseleave 当用户将鼠标指针移出对象边界时触发。
onmousemove 当用户将鼠标划过对象时触发。
onmouseout 当用户将鼠标指针移出对象边界时触发。
onmouseover 当用户将鼠标指针移动到对象内时触发。
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。
onmousewheel 当鼠标滚轮按钮旋转时触发。
onmove 当对象移动时触发。
onmoveend 当对象停止移动时触发。
onmovestart 当对象开始移动时触发。
onpaste 当用户粘贴数据以便从系统剪贴板向文档传送数据时在目标对象上触发。
onpropertychange 当在对象上发生对象上发生属性更改时触发。
onreadystatechange 当对象状态变更时触发。
onresize 当对象的大小将要改变时触发。
onresizeend 当用户更改完控件选中区中对象的尺寸时触发。
onresizestart 当用户开始更改控件选中区中对象的尺寸时触发。
onselect 当当前选中区改变时触发。
onselectstart 对象将要被选中时触发。
ontimeerror 当特定时间错误发生时无条件触发,通常由将属性设置为无效值导致。
方法 描述
addBehavior 给元素附加一个行为。
appendChild 给对象追加一个子元素。
applyElement 使得元素成为其它元素的子元素或父元素。
attachEvent 将指定函数绑定到事件,以便每当该事件在对象上触发时都调用该函数。
blur 使元素失去焦点并触发 onblur 事件。
clearAttributes 从对象中删除全部标签属性和值。
click 触发 onclick 事件来模拟单击。
cloneNode 从文档层次中复制对对象的引用。
componentFromPoint 通过特定事件返回对象在指定坐标下的位置。
contains 检查对象中是否包含给定元素。
createTextRange 为元素创建一个 TextRange 对象。
detachEvent 从事件中取消指定函数的绑定,这样当事件触发时函数就不会收到通知了。
dragDrop 初始化拖曳事件。
fireEvent 触发对象的指定事件。
focus 使得元素得到焦点并执行由 onfocus 事件指定的代码。
getAdjacentText 返回邻接文本字符串。
getAttribute 获取指定标签属性的值。
getAttributeNode 获取由 attribute.name 属性引用的 attribute 对象。
getBoundingClientRect 获取指定 TextRectangle 对象集合绑定的对象。
getClientRects 获取描述对象内容或客户区内布局的矩形集合。每个矩形都描述了一条直线。
getExpression 获取给定属性的表达式。
hasChildNodes 返回表明对象是否有子对象的值。
insertAdjacentElement 在指定位置插入元素。
insertAdjacentHTML 在指定位置的元素中插入给定的 HTML 文本。
insertAdjacentText 在指定位置插入给定的文本。
insertBefore 在文档层次中插入元素。
mergeAttributes 复制所有读/写标签属性到指定元素。
normalize 合并邻接 TextNode 对象以便生成一个常规的文档对象模型。
releaseCapture 释放当前文档中对象的鼠标捕捉。
removeAttribute 删除对象的给定标签属性。
removeAttributeNode 从对象中删除删除 attribute 对象。
removeBehavior 分离元素的行为。
removeChild 从元素上删除子结点。
removeExpression 从指定属性中删除表达式。
removeNode 从文档层次中删除对象。
replaceAdjacentText 替换元素的邻接文本。
replaceChild 用新的子元素替换已有的子元素。
replaceNode 用其它元素替换对象。
scrollIntoView 将对象滚动到可见范围内,将其排列到窗口顶部或底部。
select 突出显示表单元素的输入区域。
setActive 设置对象为当前对象而不将对象置为焦点。
setAttribute 设置指定标签属性的值。
setAttributeNode 设置 attribute 对象为对象的一部分。
setCapture 设置属于当前文档的对象的鼠标捕捉。
setExpression 设置指定对象的表达式。
swapNode 交换文档层次中两个对象的位置
<think>我们正在讨论JSF(JavaServer Faces)中的PrimeFaces组件库,特别是<p:inputText>组件。用户希望实现当在输入框中按下回车键(Enter)时,自动跳转到下一个输入框(类似于Tab键的效果)。 根据用户提供的引用[1],其中提到了监听器的概念,我们可以联想到使用JavaScript事件监听器来监听键盘事件,并在按下回车键时模拟Tab键的行为或直接聚焦到下一个输入框。 实现思路: 1. 使用JavaScript监听<p:inputText>组件的keydown或keypress事件。 2. 当事件触发时,判断按下的键是否为回车键(keyCode为13)。 3. 如果是回车键,则阻止默认行为(防止表单提交等),然后模拟Tab键的效果,即将焦点移动到下一个可聚焦的元素。 在PrimeFaces中,我们可以通过多种方式添加JavaScript事件处理程序,例如: - 使用p:ajax的event属性来绑定特定事件,但这里我们需要的是按键事件,而且需要阻止默认行为,所以使用JavaScript直接绑定可能更灵活。 - 在<p:inputText>组件上使用onkeypress、onkeydown等属性直接指定JavaScript代码。 考虑到用户要求跳转到下一个输入框,我们可以编写一个通用的JavaScript函数,用于在按下回车键时聚焦到下一个元素。 由于在JSF中组件的ID可能会被转换为客户端ID,因此我们在JavaScript中需要通过正确的选择器来获取元素。我们可以使用PrimeFaces提供的widgetVar来访问组件,或者使用jQuery通过ID选择器(需要先获取客户端的完整ID)来操作。 但是,为了简化,我们可以利用HTML中元素在表单中的自然顺序,通过DOM的focus()方法来实现跳转。通常,我们可以获取当前输入框,然后找到下一个可聚焦的元素(如input, select, textarea, button等)并聚焦。 下面是一个实现方案: 步骤: 1. 编写一个JavaScript函数,用于在回车键按下时跳转到下一个输入框。 2. 将这个函数绑定到<p:inputText>组件的onkeydown(或onkeypress)事件上。 示例代码: 首先,在页面中定义JavaScript函数: ```javascript function handleEnterKey(event) { if (event.keyCode === 13) { event.preventDefault(); // 阻止默认行为(例如表单提交) // 获取当前事件的目标元素 var currentElement = event.target; // 获取所有可聚焦元素的集合(注意:这里我们只考虑input, select, textarea, button) var focusableElements = document.querySelectorAll('input, select, textarea, button'); // 将NodeList转换为数组 var focusableArray = Array.prototype.slice.call(focusableElements); // 获取当前元素在数组中的索引 var currentIndex = focusableArray.indexOf(currentElement); // 如果当前元素在数组中,且不是最后一个,则聚焦下一个元素 if (currentIndex > -1 && currentIndex < focusableArray.length - 1) { focusableArray[currentIndex + 1].focus(); } // 否则可以不做处理,或者根据需要处理(例如最后一个输入框按回车提交表单,这里我们不提交,所以不做处理) } } ``` 然后,在<p:inputText>组件上绑定该函数: ```xhtml <p:inputText onkeydown="handleEnterKey(event)" /> ``` 但是,上述方法可能会因为页面结构复杂(例如有多个表单或不在同一表单)而导致获取的可聚焦元素集合不准确。另一种更简单的方法是使用jQuery(如果项目中已经使用了jQuery): ```javascript function handleEnterKey(event) { if (event.keyCode === 13) { event.preventDefault(); var $current = $(event.target); // 找到下一个可聚焦的元素 var $next = $current.nextAll('input, select, textarea, button:not([disabled])').first(); if ($next.length) { $next.focus(); } } } ``` 然而,在PrimeFaces环境中,我们通常已经引入了jQuery,所以可以使用jQuery。但是需要注意的是,PrimeFaces使用jQuery作为其基础,所以可以直接使用。 但是,如果不想依赖jQuery,或者担心页面结构复杂,我们可以使用原生的方式,但需要限定在同一个表单内。我们可以通过遍历当前表单内元素来实现。 改进的原生方法(限定在同一表单内): ```javascript function handleEnterKey(event) { if (event.keyCode === 13) { event.preventDefault(); var form = event.target.form; // 获取当前输入框所在的表单 var elements = form.elements; // 表单内所有元素的集合 var currentIndex = Array.prototype.indexOf.call(elements, event.target); if (currentIndex !== -1 && currentIndex < elements.length - 1) { // 跳过隐藏或禁用的元素 for (var i = currentIndex + 1; i < elements.length; i++) { if (elements[i].tabIndex >= 0 && !elements[i].disabled && !elements[i].hidden && elements[i].type !== 'hidden') { elements[i].focus(); break; } } } } } ``` 这种方法更符合表单的字段顺序。 然后,在每一个需要此功能的<p:inputText>组件上绑定onkeydown事件: ```xhtml <p:inputText onkeydown="handleEnterKey(event)" /> ``` 或者,如果我们希望为页面中所有输入框都添加这个行为,可以使用事件委托: ```javascript // 在页面加载完成后执行 $(document).ready(function() { $(document).on('keydown', 'input, select, textarea', function(event) { if (event.keyCode === 13) { event.preventDefault(); var form = this.form; var elements = form.elements; var currentIndex = Array.prototype.indexOf.call(elements, this); if (currentIndex === -1) return; for (var i = currentIndex + 1; i < elements.length; i++) { var nextElement = elements[i]; // 检查元素是否可聚焦 if (nextElement.tabIndex >= 0 && !nextElement.disabled && !nextElement.hidden && nextElement.type !== 'hidden') { nextElement.focus(); break; } } } }); }); ``` 这样就不需要在每个输入框上单独绑定事件。 注意:如果用户希望在按下回车键时提交表单,那么上述方法会阻止默认行为,所以需要权衡。但根据用户的要求,只是跳转到下一个输入框,所以我们阻止了默认行为。 另外,如果用户在一个模态对话框中,或者有特殊布局,可能需要调整获取表单元素的范围。 综上所述,我们提供了两种主要方案:单个绑定和全局绑定。用户可以根据需要选择。 由于问题中要求的是在JSF的PrimeFaces组件中实现,所以我们在<p:inputText>上使用onkeydown属性绑定即可。 下面是一个完整的示例页面: ```xhtml <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui"> <h:head> <script type="text/javascript"> // 原生JavaScript函数 function handleEnterKey(event) { if (event.keyCode === 13) { event.preventDefault(); var form = event.target.form; var elements = form.elements; var currentIndex = Array.prototype.indexOf.call(elements, event.target); if (currentIndex === -1) return; for (var i = currentIndex + 1; i < elements.length; i++) { var elem = elements[i]; // 跳过隐藏域、禁用元素、以及不可聚焦的元素 if (elem.offsetWidth === 0 || elem.offsetHeight === 0 || elem.disabled || elem.hidden || elem.type === 'hidden') continue; elem.focus(); break; } } } </script> </h:head> <h:body> <h:form> <p:inputText id="input1" onkeydown="handleEnterKey(event)" /> <p:inputText id="input2" onkeydown="handleEnterKey(event)" /> <p:inputText id="input3" onkeydown="handleEnterKey(event)" /> <p:commandButton value="Submit" /> </h:form> </h:body> </html> ``` 注意:这里我们通过检查元素的offsetWidth和offsetHeight来排除不可见的元素(例如display:none的元素),但隐藏域(type="hidden")也要排除。 另一种更准确的方法是使用jQuery,因为PrimeFaces本身就依赖于jQuery,所以我们可以放心使用。使用jQuery的示例: ```xhtml <h:head> <script type="text/javascript"> // 使用jQuery的事件委托 $(document).ready(function() { // 注意:这里使用h:form的id为form1来限定范围,避免影响其他表单 $("#form1").on('keydown', 'input, select, textarea', function(event) { if (event.keyCode === 13) { event.preventDefault(); var $fields = $(this).closest('form').find(':input:visible:not(:disabled)'); var index = $fields.index(this); if (index !== -1 && (index + 1) < $fields.length) { $fields.eq(index + 1).focus(); } } }); }); </script> </h:head> <h:body> <h:form id="form1"> <p:inputText id="input1" /> <p:inputText id="input2" /> <p:inputText id="input3" /> <p:commandButton value="Submit" /> </h:form> </h:body> ``` 在这个例子中,我们给表单(id为form1)下的所有input、select、textarea绑定了keydown事件。当按下回车键时,它会找到当前元素在表单所有可见且可用的输入元素中的索引,然后聚焦到下一个元素。 请注意,这里使用了jQuery选择器`:input:visible:not(:disabled)`,它选择了所有表单输入元素(包括button、select等),并且是可见且未禁用的。 这样,我们就不需要在每个输入组件上添加onkeydown属性。 总结:用户可以根据自己的项目情况选择原生JavaScript方法或jQuery方法,以及选择单个绑定还是全局绑定。 相关问题: 1. 在JSF中如何防止按下回车键时提交整个表单? 2. 如何确保焦点跳转只发生在同一个表单内? 3. 在PrimeFaces中,除了使用原生JavaScript事件,还有没有组件内置的方法来实现焦点跳转? </think>在 JSF 中使用 PrimeFaces 的 `<p:inputText>` 组件实现键盘回车触发焦点跳转功能,可以通过以下两种方式实现: ### 方法一:使用 JavaScript 监听键盘事件(推荐) ```xhtml <p:inputText id="input1" onkeypress="if (event.keyCode === 13) { document.getElementById('form:input2').focus(); return false; }" /> <p:inputText id="input2" /> ``` #### 说明: 1. **监听回车键**:`event.keyCode === 13` 检测回车键按下 2. **焦点跳转**:`document.getElementById('form:input2').focus()` 聚焦到目标输入框 3. **阻止默认行为**:`return false` 阻止表单提交 4. **客户端 ID 格式**:`form:input2` 是 JSF 生成的客户端 ID,格式为`[表单名]:[组件ID]` ### 方法二:结合 PrimeFaces 的 `<p:ajax>` 事件 ```xhtml <p:inputText id="input1"> <p:ajax event="keypress" oncomplete="document.getElementById('form:input2').focus()" process="@this" global="false" /> </p:inputText> ``` #### 说明: 1. **AJAX 事件**:`event="keypress"` 监听按键事件 2. **客户端回调**:`oncomplete` 在 AJAX 请求完成后执行焦点跳转 3. **优化性能**:`global="false"` 禁用全局 AJAX 状态显示 --- ### 完整示例 ```xhtml <h:form id="form"> <!-- 输入框1(回车跳转到输入框2) --> <p:inputText id="name" onkeypress="if (event.keyCode === 13) { document.getElementById('form:email').focus(); return false; }" placeholder="姓名" /> <!-- 输入框2(回车跳转到输入框3) --> <p:inputText id="email" onkeypress="if (event.keyCode === 13) { document.getElementById('form:phone').focus(); return false; }" placeholder="邮箱" /> <!-- 输入框3 --> <p:inputText id="phone" placeholder="电话" /> </h:form> ``` --- ### 关键注意事项 1. **客户端 ID 获取**: - 实际 ID 需要通过浏览器开发者工具查看生成的 HTML - 或使用 `#{component.clientId}` 在后台打印 ID 2. **阻止表单提交**: - 必须包含 `return false`,否则回车会触发表单提交 - 替代方案:`event.preventDefault()` 3. **组件可见性**: - 目标输入框需处于可操作状态(非`disabled`或`readonly`) 4. **跨浏览器兼容**: - 现代浏览器支持 `keyCode`,也可使用 `event.key === 'Enter'` --- ### 相关问题 1. 如何动态获取 JSF 组件的客户端 ID? 2. 在 PrimeFaces 中如何阻止回车键触发表单提交? 3. 除了焦点跳转,回车键还能触发哪些 JSF 组件操作? 4. 如何为多个输入框批量添加回车跳转功能? [^1]: 关于事件监听器的概念参考
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值