如何限制键盘输入仅允许字母（A-Z）触发查找按钮显隐

需求可实现，具体实现方案如下 #

核心校验逻辑通过正则匹配输入内容的首字符即可完成，你需要在现有if判断内新增一层首字符校验，修改后的代码如下：

const ccceValues = object.attributeCollection.questions.reduce(
  (acc, attribute) => {
    const fieldEntry = ccceBeInformedFieldMap.get(attribute.key);

    if (fieldEntry) {
      // 新增校验：仅当输入内容首字符为A-Z大写字母时执行赋值
      // 如需兼容小写字母可将正则改为 /^[A-Za-z]/
      if (/^[A-Z]/.test(attribute.value)) {
        acc[fieldEntry] = attribute.value;
      }
    }

    return acc;
  },
  ccceInput
);

逻辑说明 #

• 正则/^[A-Z]/会匹配输入内容的第一个字符是否为A-Z范围的大写字母，空格、数字、特殊符号为首字符的输入都会被拦截，不会执行赋值操作
• 「查找」按钮显隐逻辑只要绑定ccceValues对应的字段判断是否有有效值，即可实现仅首输入为A-Z字母时才显示按钮的需求

特殊场景补充 #

如果你需要的是整个输入交互过程中用户第一次敲击键盘输入的内容为A-Z字母，后续即使删除首字母改输入其他内容也能触发显示，那你需要额外声明一个状态变量记录首次输入的校验结果，示例如下：

// 额外声明状态变量记录首次输入是否符合要求，默认值为false
let firstInputValid = false;

const ccceValues = object.attributeCollection.questions.reduce(
  (acc, attribute) => {
    const fieldEntry = ccceBeInformedFieldMap.get(attribute.key);

    if (fieldEntry) {
      // 仅当还未校验过首次输入时，才执行首次输入校验
      if (!firstInputValid) {
        firstInputValid = /^[A-Z]/.test(attribute.value);
      }
      // 首次输入校验通过的情况下才执行赋值
      if (firstInputValid) {
        acc[fieldEntry] = attribute.value;
      }
    }

    return acc;
  },
  ccceInput
);

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