HTML中input标签的placeholder属性设置占位文字

陆砚码

2026-10-18 • 👁 0人浏览过

placeholder仅支持和

，且限于text、search、tel、url、email、password、number等类型；date/time行为不一致；hidden、checkbox、radio、file等完全不支持；不可替代label，无语义权重，不参与验证，样式需用多浏览器前缀伪元素控制。
直接加
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">placeholder</code></div>
属性就行，但不是所有地方都能用，也不是加了就万事大吉。
哪些元素能用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">placeholder</code></div>
只支持
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><input></code></div>
和
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><textarea></code></div>
，且仅限特定
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">type</code></div>
值：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">text</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">search</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">tel</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">url</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">email</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">password</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">number</code></div>
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">date</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">time</code></div>
等日期类 type 在多数浏览器中也支持，但行为不一致（比如 Chrome 显示 placeholder，Safari 可能忽略）
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">hidden</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">checkbox</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">radio</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">file</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">range</code></div>
等类型完全不支持，加了也无效
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><div contenteditable="true"></code></div>
或普通
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><div></code></div>
加
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">placeholder</code></div>
属性——浏览器会静默忽略，不会报错也不会显示
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">placeholder</code></div>
不是
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">label</code></div>
的替代品
这是最容易被忽视的语义陷阱：
屏幕阅读器通常不读取
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">placeholder</code></div>
文本，尤其在未聚焦时；用户可能根本不知道这个字段要填什么
用户开始输入后，提示立即消失，无法回看格式要求（比如“138-8888-8888”）
如果只靠
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">placeholder="必填"</code></div>
，等于把关键业务规则藏在视觉暂态里，违反 WCAG 3.3.2 原则
正确做法：始终配
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><label for="xxx"></code></div>
，把格式说明、必填标识、错误提示等放在 label 附近或
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><small></code></div>
中
CSS 自定义
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">placeholder</code></div>
样式要注意兼容性
不同浏览器用不同伪元素实现，只写
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">input::placeholder</code></div>
会漏掉旧版 Firefox 和 IE：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
Chrome/Safari/Opera：支持
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">input::placeholder</code></div>
，也认
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">input::-webkit-input-placeholder</code></div>
Firefox 19+：需
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">input::-moz-placeholder</code></div>
IE10–11：必须用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">input:-ms-input-placeholder</code></div>
Edge 12–18：部分支持
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">::placeholder</code></div>
，但更稳的是同时写
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">::-webkit-input-placeholder</code></div>
和
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">::-moz-placeholder</code></div>
别用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">!important</code></div>
强行覆盖——先检查是否漏写了某个浏览器前缀，再确认选择器权重是否足够
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">input::placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder {
  color: #777;
  font-style: normal;
}</code></div>
JavaScript 动态操作
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">placeholder</code></div>
要小心时机
通过 JS 读写没问题，但要注意 DOM 状态和框架响应逻辑：
读取：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">el.placeholder</code></div>
直接返回字符串值，安全
设置：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">el.placeholder = "新提示"</code></div>
立即生效，但不会触发
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">input</code></div>
或
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">change</code></div>
事件
在 React/Vue 中，不要用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">placeholder</code></div>
控制显隐逻辑——它不响应 state 变化，只看原生
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">value</code></div>
是否为空。想实现“输入中显示辅助提示”，得用额外
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><span></code></div>
层 +
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">focus</code></div>
/
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">input</code></div>
事件手动控制
中文输入法下 placeholder 可能闪烁：这是浏览器对
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">compositionstart</code></div>
事件处理差异导致的，不是 bug，也不建议 hack 修复
真正容易被忽略的是：placeholder 的语义权重极低，它既不参与表单验证，也不影响可访问性树结构，更不能作为交互逻辑的判断依据。把它当成纯视觉提示，其他该写的 label、aria-label、验证规则，一个都不能少。
                            </div>

<nav class="phpwebsoft-article-nav" aria-label="文章导航">

<a href="http://www.phpwebsoft.com/news/26226.html" class="phpwebsoft-article-nav-link phpwebsoft-article-nav-prev">
                                    <span>‹</span>
                                    <div>
                                        <div class="phpwebsoft-article-nav-label">上一篇</div>
                                        <div class="phpwebsoft-article-nav-title">javascript前端一定会用到吗</div>
                                    </div>
                                </a>

<a href="http://www.phpwebsoft.com/news/26260.html" class="phpwebsoft-article-nav-link phpwebsoft-article-nav-next">
                                    <div>
                                        <div class="phpwebsoft-article-nav-label">下一篇</div>
                                        <div class="phpwebsoft-article-nav-title">如何通过 Console API 的结构化输出技巧实现对复杂 DOM 节点的深度调试</div>
                                    </div>
                                    <span>›</span>
                                </a>

</nav>
                        </div>
                    </article>

<section class="phpwebsoft-content-section" style="margin-top: 20px;">
                        <h2 class="phpwebsoft-widget-title" style="margin-bottom: 20px;">相关文章</h2>
                        <ul class="phpwebsoft-article-list">

<li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/26226.html" class="phpwebsoft-article-link">javascript前端一定会用到吗</a>
                                <div class="phpwebsoft-article-meta">2026-10-18</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/26225.html" class="phpwebsoft-article-link">jquery实现ajax提交表单的两种方法</a>
                                <div class="phpwebsoft-article-meta">2026-10-18</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/26166.html" class="phpwebsoft-article-link">怎样用CSS操作SVG数据展示—SVG样式控制技巧</a>
                                <div class="phpwebsoft-article-meta">2026-10-18</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/26165.html" class="phpwebsoft-article-link">学习HTML怎么高效分配练习时间 HTML学习计划模板【规划】</a>
                                <div class="phpwebsoft-article-meta">2026-10-18</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/26155.html" class="phpwebsoft-article-link">五段实用的js高级技巧_javascript技巧</a>
                                <div class="phpwebsoft-article-meta">2026-10-18</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/26148.html" class="phpwebsoft-article-link">CSS3选择器的研究</a>
                                <div class="phpwebsoft-article-meta">2026-10-18</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/26139.html" class="phpwebsoft-article-link">html和css怎么学_html+css学习路径【建议】</a>
                                <div class="phpwebsoft-article-meta">2026-10-18</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/26260.html" class="phpwebsoft-article-link">如何通过 Console API 的结构化输出技巧实现对复杂 DOM 节点的深度调试</a>
                                <div class="phpwebsoft-article-meta">2026-10-18</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/26261.html" class="phpwebsoft-article-link">在js中如何对url实施对象化管理</a>
                                <div class="phpwebsoft-article-meta">2026-10-18</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/26263.html" class="phpwebsoft-article-link">HTML怎么做简答题组件_html简答题文本框组件实现【从零开始】</a>
                                <div class="phpwebsoft-article-meta">2026-10-18</div>
                            </li>

</ul>
                    </section>
                </div>

<aside class="phpwebsoft-sidebar phpwebsoft-sidebar-right" aria-label="侧边栏">
    
    <div class="phpwebsoft-widget">
        <h3 class="phpwebsoft-widget-title">推荐阅读</h3>
        <div class="phpwebsoft-recommend-grid">

<a href="http://www.phpwebsoft.com/news/26263.html" class="phpwebsoft-recommend-item">
                <div class="phpwebsoft-recommend-thumb">
                    <img src="http://www.phpwebsoft.com/static/v10/images/article-6.jpg" alt="HTML怎么做简答题组件_html简答题文本框组件实现【从零开始】">
                </div>
                <div class="phpwebsoft-recommend-title">HTML怎么做简答题组件_html简答题文本框组件实现【从零开始】</div>
            </a>
    
            <a href="http://www.phpwebsoft.com/news/26261.html" class="phpwebsoft-recommend-item">
                <div class="phpwebsoft-recommend-thumb">
                    <img src="http://www.phpwebsoft.com/static/v10/images/article-6.jpg" alt="在js中如何对url实施对象化管理">
                </div>
                <div class="phpwebsoft-recommend-title">在js中如何对url实施对象化管理</div>
            </a>
    
            <a href="http://www.phpwebsoft.com/news/26260.html" class="phpwebsoft-recommend-item">
                <div class="phpwebsoft-recommend-thumb">
                    <img src="http://www.phpwebsoft.com/static/v10/images/article-6.jpg" alt="如何通过 Console API 的结构化输出技巧实现对复杂 DOM 节点的深度调试">
                </div>
                <div class="phpwebsoft-recommend-title">如何通过 Console API 的结构化输出技巧实现对复杂 DOM 节点的深度调试</div>
            </a>
    
            <a href="http://www.phpwebsoft.com/news/26228.html" class="phpwebsoft-recommend-item">
                <div class="phpwebsoft-recommend-thumb">
                    <img src="http://www.phpwebsoft.com/static/v10/images/article-6.jpg" alt="HTML中input标签的placeholder属性设置占位文字">
                </div>
                <div class="phpwebsoft-recommend-title">HTML中input标签的placeholder属性设置占位文字</div>
            </a>

</div>
    </div>

<div class="phpwebsoft-widget">
        <h3 class="phpwebsoft-widget-title">最新文章</h3>
        <ul class="phpwebsoft-article-list">

<li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/26263.html" class="phpwebsoft-article-link">HTML怎么做简答题组件_html简答题文本框组件实现【从零开始】</a>
                <div class="phpwebsoft-article-meta">2026-10-18</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/26261.html" class="phpwebsoft-article-link">在js中如何对url实施对象化管理</a>
                <div class="phpwebsoft-article-meta">2026-10-18</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/26260.html" class="phpwebsoft-article-link">如何通过 Console API 的结构化输出技巧实现对复杂 DOM 节点的深度调试</a>
                <div class="phpwebsoft-article-meta">2026-10-18</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/26228.html" class="phpwebsoft-article-link">HTML中input标签的placeholder属性设置占位文字</a>
                <div class="phpwebsoft-article-meta">2026-10-18</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/26226.html" class="phpwebsoft-article-link">javascript前端一定会用到吗</a>
                <div class="phpwebsoft-article-meta">2026-10-18</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/26225.html" class="phpwebsoft-article-link">jquery实现ajax提交表单的两种方法</a>
                <div class="phpwebsoft-article-meta">2026-10-18</div>
            </li>

</ul>
    </div>

<div class="phpwebsoft-widget">
        <h3 class="phpwebsoft-widget-title">热门标签</h3>
        <div class="phpwebsoft-article-tag-list">

</div>
    </div>
</aside>
            </div>
        </div>
    </main>

<footer class="phpwebsoft-footer">
        <div class="phpwebsoft-container">
            <div class="phpwebsoft-footer-links" style="justify-content: center;">
                
                
                <a href="http://www.phpwebsoft.com/22.html" class="phpwebsoft-footer-link">免责声明</a>
                
                <a href="http://www.phpwebsoft.com/23.html" class="phpwebsoft-footer-link">关于我们</a>
                
                <a href="http://www.phpwebsoft.com/24.html" class="phpwebsoft-footer-link">联系我们</a>
                
                <a href="http://www.phpwebsoft.com/25.html" class="phpwebsoft-footer-link">投诉删除</a>
                
                <a href="http://www.phpwebsoft.com/26.html" class="phpwebsoft-footer-link">投稿须知</a>
                
                
            </div>
            <div class="phpwebsoft-footer-copyright" style="text-align: center; margin-top: 20px;">
                Copyright 2026
                 websoft网络软件专家
                版权所有
                 <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank" style="color: inherit;">黔ICP备2025061481号</a>
            </div>
            <div style="text-align: center; margin-top: 10px; font-size: 12px; color: #999;">免责声明：本站信息来源于网络，仅供学习使用，版权归原作者所有，如有不愿意被转载的情况，请联系QQ：182111886，通知我们删除已转载的信息。</div>
        </div>
    </footer>

<button class="phpwebsoft-back-to-top" id="backToTop" aria-label="返回顶部">⇧</button>

<script src="http://www.phpwebsoft.com/static/v10/js/common.js"></script>
    
    <div class="hide">
    </div>
</body>
</html>