移动端日期输入框首次点击未显示mm/dd/yyyy格式问题求助

你的问题核心是动态切换input类型（text→date）在移动端浏览器引发的渲染异常：首次点击时控件空白，需二次点击才能唤起日历，同时需要保留占位符和指定格式的显示效果。以下是两种可行的解决方案：

方案一：直接使用原生date控件（推荐，兼容性更稳定） #

放弃动态切换type的逻辑，直接使用type="date"，通过CSS伪元素模拟自定义占位符，同时修复移动端日历唤起问题。

修改后的HTML代码 #

<input id="date" placeholder="Date of Birth" type="date" name="dob" max="<?php echo date('Y-m-d'); ?>" required>

调整后的CSS代码 #

/* 为date输入框添加自定义占位符（覆盖原生默认提示） */
form input[type="date"] {
    -webkit-appearance: auto; /* 移除原有的none，确保移动端能正常唤起日历控件 */
    position: relative;
}

form input[type="date"]::before {
    content: attr(placeholder);
    color: #999;
    position: absolute;
    background: inherit;
    padding: inherit;
    pointer-events: none; /* 不干扰输入框的点击交互 */
}

/* 聚焦或有值时隐藏占位符 */
form input[type="date"]:focus::before,
form input[type="date"]:valid::before {
    content: "";
}

/* 保留原有其他输入框的样式 */
form input[type="text"],
form input[type="email"],
form input[type="password"],
form select,
form textarea {
    -moz-transition: background-color 0.25s ease-in-out;
    -webkit-transition: background-color 0.25s ease-in-out;
    -ms-transition: background-color 0.25s ease-in-out;
    transition: background-color 0.25s ease-in-out;
    -webkit-appearance: none;                                   
    display: block;
    border: 0;
    background: #e8e8e8;
    width: 100%;
    box-shadow: inset 2px 2px 0px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    line-height: 1.25em;
    padding: 0.75em 1em 0.75em 1em;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form input[type="date"]:focus,                      
form select:focus,
form textarea:focus {
    background: #f0f0f0;
}

方案二：保留类型切换逻辑，修复移动端渲染问题 #

如果必须保留初始text类型的设定，通过JavaScript优化切换逻辑，避免空白和二次点击问题。

修改后的HTML代码 #

<input id="date" placeholder="Date of Birth" type="text" name="dob" data-date-format="MM DD YYYY" onfocus="handleDateFocus(this)" max="<?php echo date('Y-m-d'); ?>" required>

添加JavaScript逻辑 #

function handleDateFocus(el) {
    // 记录当前输入值，避免切换类型后丢失
    const currentVal = el.value;
    // 切换为date类型
    el.type = 'date';
    // 恢复输入值（如果存在）
    if (currentVal) el.value = currentVal;
    // 延迟触发点击，强制唤起移动端日历控件
    setTimeout(() => el.click(), 10);
}

同步调整CSS #

确保date输入框的原生样式不被覆盖：

form input[type="date"] {
    -webkit-appearance: auto;
}

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