无法在可编辑 <p:selectOneMenu 上触发 onkeydown 事件答案

【问题标题】：Not able to trigger the onkeydown event on an editable <p:selectOneMenu无法在可编辑 <p:selectOneMenu 上触发 onkeydown 事件
【发布时间】：2017-08-01 16:35:18
【问题描述】：

我正在尝试在数据表上实现键盘箭头导航。

为此，我在该 datatable 的每个列组件中添加事件 onkeydown，然后它调用一个 JavaScript 函数，该函数将评估按下的按钮是否为箭头键。如果是，它将focus() 或click() 下一个或上一个组件。一切正常，直到该组件是可编辑的，即在上。

示例代码：

<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>

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

更新： 按照建议，我在那里写了一些东西（“简单测试”）后确实检查了元素，这就是我得到的：

<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>

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

【问题讨论】：

标签： javascript jsf primefaces selectonemenu onkeyup

【解决方案1】：

原因不是 JSF 特定的，而是浏览器中触发事件的工作原理：

选择标签不能接受键盘类型的输入，因此它们不会触发 keydown|up 事件，但它们肯定会响应更改，例如当您选择一个或多个时。 p>
例如，将 <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>

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

按键
键位
改变

奇怪的是，您的 PF 6.1 (?) 测试不起作用。

【讨论】：

嗯，我明白你说的。但是，如果可以使
另外，我检查了 PrimeFaces 文档 (primefaces.org/docs/guide/primefaces_user_guide_6_1.pdf)，在第 463 页上它说 onkeyup/down 是 SelectOneMenu 的属性。
那么他们应该开火。我做了一个简单的 HTML 测试，他们正在开火。请参阅我的答案的编辑。你用的是6.1吗？我这里有 6.0 (CE)。
1) 您使用的是 6.1 吗？ 我这里有 6.0 (CE)。 2) 生成的 HTML 输出是什么样的？
真正简单的 html ！= PrimeFaces selectOneMenu... 查看源代码和 html 并进行比较！

【解决方案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);
        ....

    }
...
}

【讨论】：