如何移除Streamlit text_input组件的「Press enter to apply」提示

问题场景 #

使用Streamlit开发Web应用时，为了配合提交按钮使用，已经通过自定义JS代码阻止了text_input组件的回车触发行为，但输入框仍显示灰色提示文字「Press enter to apply」，需要移除该提示避免用户产生误解。现有代码如下：

js_code = """
<script>
document.querySelector('.stTextInput').addEventListener('keydown', function(e) {
if (e.keyCode === 13) { // 13 is the Enter key
            e.preventDefault();
}
});
</script>
"""

st.markdown(js_code, unsafe_allow_html=True)

解决方案 #

要移除该提示，只需在原有JS逻辑基础上，新增定位并隐藏提示元素的代码即可。Streamlit的text_input提示文字在不同版本中可能对应不同的DOM选择器，以下是兼容常见版本的实现：

单输入框处理代码 #

js_code = """
<script>
// 保留阻止回车提交的逻辑
document.querySelector('.stTextInput').addEventListener('keydown', function(e) {
    if (e.keyCode === 13) {
        e.preventDefault();
    }
});

// 移除「Press enter to apply」提示
const inputHint = document.querySelector('.stTextInput div[data-testid="stWidgetLabel"]');
if (inputHint) {
    inputHint.style.display = 'none';
}

// 兼容旧版本Streamlit的备选选择器
const altHint = document.querySelector('.stTextInput .st-hf');
if (altHint) {
    altHint.style.display = 'none';
}
</script>
"""

st.markdown(js_code, unsafe_allow_html=True)

多输入框批量处理代码 #

如果页面存在多个text_input组件，改用querySelectorAll循环处理所有输入框：

js_code = """
<script>
document.querySelectorAll('.stTextInput').forEach(input => {
    // 阻止当前输入框的回车提交
    input.addEventListener('keydown', function(e) {
        if (e.keyCode === 13) {
            e.preventDefault();
        }
    });
    
    // 隐藏当前输入框的提示文字
    const hint = input.querySelector('div[data-testid="stWidgetLabel"]') || input.querySelector('.st-hf');
    if (hint) {
        hint.style.display = 'none';
    }
});
</script>
"""

st.markdown(js_code, unsafe_allow_html=True)

代码说明 #

• 保留原有的回车阻止逻辑，确保用户按回车不会触发无效操作
• 提供两种DOM选择器，适配不同Streamlit版本的提示元素结构
• 使用display: none彻底隐藏提示文字，也可替换为visibility: hidden（后者会保留提示文字的占位空间）

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