通过jQuery事件填充输入框后，输入框占位符未消失的问题求助

你遇到的问题是因为部分场景下，浏览器或自定义样式未正确识别输入框已被赋值，导致占位符（placeholder）未自动隐藏。以下是几种可行的解决方法：

方法1：赋值时清空占位符属性 #

在设置输入框值的同时，直接将placeholder属性设为空字符串，强制隐藏占位符：

$('#category_id').on('change', function () {
    // 提取选中项文本并移除开头的连字符
    const categoryText = $(this).find('option:selected').text().replace(/^[-]+/, '');
    const eshopCategoryText = $('#eshop_category_id option:selected').text().replace(/^[-]+/, '');
    // 拼接最终标题值
    const titleValue = `(${categoryText}) -> (${eshopCategoryText})`;
    
    // 赋值并清空占位符
    $('#title')
        .val(titleValue)
        .attr('placeholder', '');
})

如果之后需要恢复占位符（比如输入框被手动清空时），可以额外监听输入框的input或change事件，在值为空时重新设置原占位符内容。

方法2：触发输入事件让浏览器重新识别状态 #

有些情况下，仅设置val()不会触发浏览器的内部状态更新，手动触发input事件可以让浏览器重新检测输入框是否有值，从而自动隐藏占位符：

$('#category_id').on('change', function () {
    const categoryText = $(this).find('option:selected').text().replace(/^[-]+/, '');
    const eshopCategoryText = $('#eshop_category_id option:selected').text().replace(/^[-]+/, '');
    const titleValue = `(${categoryText}) -> (${eshopCategoryText})`;
    
    $('#title')
        .val(titleValue)
        .trigger('input'); // 触发input事件更新状态
})

方法3：检查并修正自定义CSS #

如果项目中有自定义的占位符样式，可能导致占位符在输入框有值时仍显示。检查是否存在类似以下的错误样式：

#title::placeholder {
    opacity: 1;
    /* 其他强制显示的样式 */
}

改成基于:placeholder-shown伪类的样式，仅当输入框为空且显示占位符时才应用样式：

/* 仅当输入框为空显示占位符时，设置占位符样式 */
#title:placeholder-shown::placeholder {
    opacity: 1;
    color: #999;
}
/* 输入框有值时隐藏占位符 */
#title:not(:placeholder-shown)::placeholder {
    opacity: 0;
}

内容的提问来源于stack exchange，提问作者Faye D.