移动端Aura组件ui:inputDate清空时如何触发失焦显示占位符？

针对ui:inputDate字段清空后无法立即触发占位符显示的问题，结合现有代码逻辑，可从以下几个方向优化：

1. 修正焦点转移逻辑 #

当前代码尝试通过让按钮获取焦点来间接移除日期字段焦点，可能因DOM更新延迟失效。改为直接对日期字段的原生DOM元素调用blur()：

修改控制器中焦点处理代码段：

var birthdayValue = birthdayInput.get("v.value");

console.log('BirthdayValue: ', birthdayValue);
// 检查生日值是否为空或无效
if (!birthdayValue || isNaN(new Date(birthdayValue))) {
    // 直接让日期字段失焦
    birthdayInput.getElement().blur();
}

2. 优化nullify函数的清空触发逻辑 #

确保nullify函数能正确清空字段值并触发handleBirthdayChange执行：

nullify : function(component, event) {
    var inputElement = event.getSource().getElement();
    // 检测是否为清空操作（全选删除、退格清空等）
    if (!inputElement.value.trim()) {
        component.set("v.birthdayValue", null);
        // 手动触发change事件确保handleBirthdayChange执行
        var changeEvent = $A.get("e.ui:change");
        changeEvent.setParams({
            "value": null,
            "source": event.getSource()
        });
        changeEvent.fire();
    }
}

3. 调整ui:inputDate的事件绑定 #

移除冗余的updateOn配置，添加change事件绑定确保字段值变更时立即触发处理：

<div id="sfdc_birthday_container" class="sfdc dateOption2">
    <ui:inputDate aura:id="birthday2" labelClass="" value="{!v.birthdayValue}" 
                  blur="{!c.handleBirthdayChange}" change="{!c.handleBirthdayChange}"
                  displayDatePicker="true" format="{!v.dateFormat}" 
                  select="{!c.nullify}" keyup="{!c.nullify}" 
                  class="input sfdc_usernameinput sfdc" />
    <img src="{!$Resource.BirthdayDatePickerIcon}" alt="Date Picker Icon" class="sfdc-datepicker-icon"/>
</div>

4. 确认CSS占位符的状态依赖 #

检查占位符CSS类是否正确关联字段的focus状态，示例：

.en-birthday-placeholder:not(:focus)::after {
    content: "MM/DD/YYYY";
    /* 其他占位符样式 */
}

若样式依赖not(:focus)，字段失焦后CSS会立即生效，无需额外操作。

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