如何用JavaScript实现文本框特定位置逐步掩码？替代h:inputSecret

嘿，这个需求确实没法直接用<h:inputSecret>搞定——毕竟它的默认逻辑就是输入即隐藏全部内容。不过咱们可以结合JSF组件+前端JavaScript来实现，既能满足UI的自定义掩码展示，又能让后台拿到真实的输入值，下面是具体的实现思路和步骤：

咱们换个思路：用**普通的<h:inputText>做UI展示（用来显示掩码后的内容），同时搭配一个<h:inputHidden>**存储真实输入值。前端用JS拦截输入事件，实时生成符合要求的掩码文本显示在输入框，真实值则存在隐藏域里，提交表单时后台直接读取隐藏域绑定的bean属性即可。

1. 页面组件结构 #

先在表单里放两个核心组件：

<h:form id="maskForm">
    <!-- 用于展示掩码的输入框，用户实际交互的入口 -->
    <h:inputText id="maskedInput" maxlength="6" oninput="handleMaskInput(this)" />
    <!-- 隐藏域：存储真实输入值，直接绑定到后台Managed Bean -->
    <h:inputHidden id="realInput" value="#{userBean.field}" />
</h:form>

这里用oninput事件比onkeyup更可靠，能覆盖粘贴、拖拽输入等场景。

2. 前端JS实现掩码逻辑 #

接下来写handleMaskInput函数，要处理三个关键：维护真实值、生成对应掩码、优化光标体验（避免输入时光标跳走）。完全贴合你要的输入步骤逻辑：

function handleMaskInput(input) {
    const hiddenInput = document.getElementById('maskForm:realInput');
    let realValue = hiddenInput.value || '';
    const currentDisplay = input.value;
    const displayLength = currentDisplay.length;
    const realLength = realValue.length;

    // 处理新增字符（输入/粘贴）
    if (displayLength > realLength) {
        // 从当前输入中提取新增的字符（因为掩码会替换部分内容，所以取最后一位有效输入）
        const newChar = input.value.charAt(displayLength - 1);
        // 只允许字母数字（符合需求）
        if (/[a-zA-Z0-9]/.test(newChar)) {
            realValue += newChar;
        }
    } 
    // 处理删除操作（退格/删除键）
    else if (displayLength < realLength) {
        realValue = realValue.substring(0, displayLength);
    }

    // 更新隐藏域的真实值
    hiddenInput.value = realValue;

    // 根据真实值长度生成对应的掩码显示文本
    let displayValue = '';
    switch(realValue.length) {
        case 1:
            displayValue = realValue;
            break;
        case 2:
            displayValue = '*' + realValue.charAt(1);
            break;
        case 3:
            displayValue = '**' + realValue.charAt(2);
            break;
        case 4:
            displayValue = '**' + realValue.substring(2, 4);
            break;
        case 5:
            displayValue = '**' + realValue.substring(2, 4) + '*';
            break;
        case 6:
            displayValue = '**' + realValue.substring(2, 4) + '**';
            break;
        default:
            displayValue = '';
    }

    // 恢复光标位置，避免输入时光标跳至末尾，提升体验
    const cursorPos = input.selectionStart;
    input.value = displayValue;
    input.setSelectionRange(cursorPos, cursorPos);
}

这里还加了字母数字的输入验证，符合你“支持字母数字”的要求。

3. 后台Managed Bean处理 #

后台不需要做任何额外处理，直接用你原来的userBean即可——因为隐藏域已经绑定了field属性，表单提交时真实值会自动传入：

@ManagedBean
@ViewScoped
public class UserBean implements Serializable {
    private String field;

    // Getter & Setter
    public String getField() {
        return field;
    }

    public void setField(String field) {
        this.field = field;
    }

    // 表单提交示例方法
    public void submitForm() {
        // 这里的field就是用户输入的真实值，比如"123456"或"AbCdEf"
        System.out.println("用户真实输入值：" + field);
    }
}

4. 额外优化建议 #

• 初始值兼容：如果后台field已有初始值，页面加载时自动生成掩码显示，可加个页面加载事件：

  window.onload = function() {
      const input = document.getElementById('maskForm:maskedInput');
      if (input) {
          handleMaskInput(input);
      }
  }
  

• 样式优化：可以给maskedInput加类似密码框的样式，让用户感知这是敏感输入框。

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