Question

=“”

上触发onkeydown事件我试图在数据表上实现键盘箭头导航。

为此，我在 datatable 的每个列组件中添加事件 onkeydown ，然后调用一个JavaScript函数来评估是否按下了按钮是一把箭头键。如果是，它将焦点（）或点击（）下一个或上一个组件。一切都运行良好，直到该组件是可编辑的，即在。

示例代码：

<p:column id="column3" headerText="column test">
    <p:cellEditor >
        <f:facet name="output" >
            <h:outputText value="#{beneficiary.lista.selectedValue}" styleClass="required" />
        </f:facet>

        <f:facet name="input">
            <p:selectOneMenu id="sel3"  onkeydown="alert('down')" onkeyup="alert('up')" onchange="alert('change')"
                value="#{beneficiary.lista.selectedKey}" filter="true"
                filterMatchMode="contains"   required="true" editable="true">
                    <f:selectItem itemLabel=" " itemValue=" "  />
                        <f:selectItems
                            value="#{beneficiary.lista.possibleValues}"
                            var="selection" itemValue="#{selection.key}"
                            itemLabel="#{selection.value}" />
            </p:selectOneMenu>
        </f:facet>
    </p:cellEditor>
</p:column>

在这里，我可以进行点击（）并获得焦点。我可以在列表中的值之间切换，这将触发 onchange 事件。但是，当我再次点击它进行编辑时， onkeyup 和 onkeydown 都不会被触发。

更新根据建议，我在那里写了一些东西后检查了元素（＆＃34;简单测试＆＃34;）这就是我得到的：

<div class="ui-cell-editor-output" style="display: block;">
    <span class="required">Simple Test</span>
</div>
<div class="ui-cell-editor-input" style="display: none;">
    <div class="ui-selectonemenu ui-widget ui-state-default ui-corner-all" id="contentForm:newtable:0:sel3">
        <div class="ui-helper-hidden-accessible">
            <input name="contentForm:newtable:0:sel3_focus" id="contentForm:newtable:0:sel3_focus" type="text" autocomplete="off">
        </div>
        <div class="ui-helper-hidden-accessible">
            <select name="contentForm:newtable:0:sel3_input" tabIndex="-1" id="contentForm:newtable:0:sel3_input" onkeydown="alert('down')" onkeyup="alert('up')" onchange="alert('change');">
                <option value=" "></option>
                <option value="OPTION1">Option 1 </option>
                <option value="OPTION2">Option 2</option>
                <option value="OPTION3">Option 3</option>
                </select>
        </div>
        <input name="contentForm:newtable:0:sel3_editableInput" class="ui-selectonemenu-label ui-inputfield ui-corner-all" type="text" value="Simple Test">
        <div class="ui-selectonemenu-trigger ui-state-default ui-corner-right">
            <span class="ui-icon ui-icon-triangle-1-s ui-c"></span>
        </div>
    /div>
</div>

过去你们有没有遇到过类似的问题？任何解决方案/建议？

Answer 1

原因不是特定于JSF，而是更多关于浏览器中触发事件的工作方式：

选择标签不能接受键盘类型输入，因此它们不会触发keydown | up事件，但肯定会响应更改，例如当您选择一个或多个时。
将<p:inputText onkeydown="alert('down')" onkeyup="alert('up')" />添加到您的JSF页面（与通用h:inputText相同），您将看到它们被解雇
请记住，只有onkeyup，新值设置（当然在输入字段中），onkeydown可以读取前一个（！）值。

希望这会有所帮助。： - ）

编辑：TIL：一个简单的HTML测试。

<!DOCTYPE html>
<html>
<head>
<title>HTML onkeydown/onykeyup test</title>
</head>
<body>
<body>
<form>
<select onchange="alert('change')" onkeydown="alert('keydown')" onkeyup="alert('keyup')">
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
</select>
</form>
</body>
</html>

如果我使用键盘，则按顺序触发以下事件：

KEYDOWN
KEYUP
变化

很遗憾你的PF 6.1（？）测试不起作用。

Answer 2

您可以使用该类的覆盖进行修复：

package org.primefaces.component.selectonemenu;
...
public class SelectOneMenuRenderer extends SelectOneRenderer{
...
    protected void encodeInput(.....){
        ...
        writer.writeAttribute("class", "ui-helper-hidden-accessible", null);    
        writer.startElement("input", null);
        writer.writeAttribute("id", focusId, null);
        writer.writeAttribute("name", focusId, null);
        writer.writeAttribute("type", "text", null);
        writer.writeAttribute("autocomplete", "off", null);

       //add this line
        if (menu.getOnkeydown() != null) writer.writeAttribute("onkeydown", menu.getOnkeydown(), null);
        ....

    }
...
}

无法在可编辑的<p：selectonemenu

2 个答案: