如何限制可编辑p:selectOneMenu下拉框仅允许输入数字

嘿，针对你这个PrimeFaces可编辑下拉框限制输入数字的需求，我给你整理了几种实用的解决方案，你可以根据自己的场景选择：

PrimeFaces的可编辑下拉框底层是一个普通输入框，我们可以通过监听输入事件过滤非数字字符。给组件加个自定义样式类，然后通过JS定位到输入框：

<p:selectOneMenu editable="true" styleClass="numeric-only">
    <f:selectItem itemLabel="0" itemValue="0" />
    <f:selectItem itemLabel="5" itemValue="5"/>
    <f:selectItem itemLabel="10" itemValue="10" />
    <f:selectItem itemLabel="20" itemValue="20"/>
</p:selectOneMenu>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 定位到下拉框的输入元素（PrimeFaces默认类是ui-selectonemenu-input）
    const numInput = document.querySelector('.numeric-only .ui-selectonemenu-input');
    
    // 实时过滤非数字字符
    numInput.addEventListener('input', function() {
        this.value = this.value.replace(/[^0-9]/g, '');
    });
    
    // 阻止非数字按键输入，双重保险
    numInput.addEventListener('keypress', function(e) {
        const charCode = e.which || e.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57)) {
            e.preventDefault();
        }
    });
});
</script>

如果想更贴合PrimeFaces的生态，可以用<p:inputMask>替换下拉框的默认输入部分，通过掩码规则限制数字输入：

<p:selectOneMenu editable="true" value="#{yourBean.selectedValue}">
    <f:selectItem itemLabel="0" itemValue="0" />
    <f:selectItem itemLabel="5" itemValue="5"/>
    <f:selectItem itemLabel="10" itemValue="10" />
    <f:selectItem itemLabel="20" itemValue="20"/>
    
    <!-- 自定义输入框为InputMask，mask="9*"表示允许任意数量数字 -->
    <f:facet name="input">
        <p:inputMask mask="9*" value="#{yourBean.selectedValue}" />
    </f:facet>
</p:selectOneMenu>

这个方案能和后端Bean无缝绑定，还自带PrimeFaces的组件特性，比如验证提示等。

通过f:passThroughAttribute给输入框传递HTML5的type="number"属性，快速限制输入类型：

<p:selectOneMenu editable="true">
    <f:selectItem itemLabel="0" itemValue="0" />
    <f:selectItem itemLabel="5" itemValue="5"/>
    <f:selectItem itemLabel="10" itemValue="10" />
    <f:selectItem itemLabel="20" itemValue="20"/>
    <f:passThroughAttribute name="type" value="number" />
</p:selectOneMenu>

注意：这个方法虽然简洁，但部分浏览器允许输入e、+、-这类特殊字符，建议配合方法1的JS过滤一起使用，提升严谨性。

内容的提问来源于stack exchange，提问作者Mahesh