PrimeFaces InputText安卓Chrome控制失效及正则重复值问题求助

刚好碰到过类似的场景，给你拆解下这两个问题的根源和解决办法：

一、为什么去掉 alert("test") 后字符限制就失效了？ #

问题出在你选的onkeydown事件时机不对——这个事件是在字符真正输入到输入框之前触发的：

• 当你按下按键时，keydown先执行，这时候event.target.value还是按键前的旧内容；
• 而alert("test")会阻塞代码执行，相当于给了浏览器“缓冲时间”，让它先完成字符输入的默认操作，等你关掉alert时，输入框的内容已经更新了，这时候执行substr(0,5)才能正确截取到带新字符的内容；
• 去掉alert后，你的代码瞬间跑完，浏览器紧接着就执行默认的字符插入行为，直接覆盖了你刚才修改的value，所以看起来你的限制代码“没起作用”。

正确的解决方式： #

换成input事件（最推荐，因为它能覆盖所有内容变更场景，包括粘贴、拖拽输入）或者keyup事件，这两个事件都是在输入框内容已经更新后触发的：

<p:inputText oninput="charLimit(event);" />
<script type="text/javascript">
function charLimit(event) {
    event.target.value = event.target.value.substr(0, 5);
}
</script>

要是只是简单限制字符长度，其实PrimeFaces自带了maxlength属性，直接用更省心：

<p:inputText maxlength="5" />

二、正则控制输入时出现值重复的问题 #

这种情况大多是事件时机没选对或者没处理好光标位置导致的，给你两种常见场景的解决思路：

场景1：用keydown/keypress校验但未阻止默认行为 #

如果你在按键按下时就做正则校验，却没阻止不符合规则的按键的默认行为，浏览器还是会把字符插进去，导致重复。这时候要先校验，不匹配就拦截：

<p:inputText onkeydown="return regexLimit(event);" />
<script type="text/javascript">
function regexLimit(event) {
    // 示例：只允许输入字母和数字
    const allowedRegex = /^[a-z0-9]*$/i;
    const key = String.fromCharCode(event.keyCode);
    
    // 特殊按键（退格、删除、方向键等）直接放行，不影响编辑体验
    if (event.keyCode === 8 || event.keyCode === 46 || (event.keyCode >= 37 && event.keyCode <= 40)) {
        return true;
    }
    
    // 校验当前内容加上新按键后的结果是否符合规则
    const newValue = event.target.value + key;
    if (!allowedRegex.test(newValue)) {
        event.preventDefault(); // 阻止默认的字符输入行为
        return false;
    }
    return true;
}
</script>

场景2：用input事件但未处理光标位置 #

如果在input事件中直接替换输入框内容，浏览器会自动把光标移到末尾，当用户在中间位置输入不符合规则的字符时，光标跳转可能会让用户误以为输入重复。这时候要先保存光标位置，修改后再恢复：

<p:inputText oninput="regexInputLimit(event);" />
<script type="text/javascript">
function regexInputLimit(event) {
    const target = event.target;
    // 示例：只保留字母和数字
    const allowedRegex = /[^a-z0-9]/gi;
    const oldValue = target.value;
    const newValue = oldValue.replace(allowedRegex, '');
    
    if (newValue !== oldValue) {
        // 保存修改前的光标位置
        const cursorPos = target.selectionStart;
        // 替换内容
        target.value = newValue;
        // 调整光标位置（因为过滤了字符，要减去被删除的字符数）
        target.setSelectionRange(
            cursorPos - (oldValue.length - newValue.length),
            cursorPos - (oldValue.length - newValue.length)
        );
    }
}
</script>

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