为啥我的 textarea 的占位符没有出现？

Posted 2023-03-05

【中文标题】为啥我的 textarea 的占位符没有出现？

【英文标题】：Why isn't my textarea's placeholder showing up?为什么我的 textarea 的占位符没有出现？

【发布时间】：2012-05-22 01:56:19

【问题描述】：

我为我的所有表单元素使用占位符，并且除了文本区域之外，它都显示在它们中。现在只是在 safari 中查看它，并意识到我的 type="number" 输入也没有显示占位符。

页面为here，您需要点击页面顶部的“立即预订”链接。

我的html：

<form id="booking" action="single-workshops.php">
    <input type="text" required="required" placeholder="name"/><br />
    <input type="text" required="required" placeholder="your phone number"/><br />
    <input type="email" required="required" placeholder="email"/><br />
    <input type="number" required="required" placeholder="how many in your party" /><br />
    <textarea rows="5" cols="30" placeholder="enter optional message">
    </textarea><br />
    <input type="button" value="submit"/>
</form>

【问题讨论】：

HTML5 textarea placeholder not appearing的可能重复

【参考方案1】：

因为您的 textarea 中有文本内容，其中包含换行符。

<textarea rows="5" cols="30" placeholder="enter optional message">
        </textarea><br />

应该是：

<textarea rows="5" cols="30" placeholder="enter optional message"></textarea><br />

【讨论】：

不错的收获！我永远不会想到这一点，考虑到技术上有内容，我真的很惊讶它在其他浏览器中也能工作。添加第二个换行符确实会删除 Firefox 中的占位符。

它在其他浏览器中不起作用。排名第一的是 chrome，而不是 safari。只是在寻找某种解决方法。

@Nicola：解决了吗？我没有安装 Safari。

@WesleyMurch 对不起，我的意思是如果我删除换行符，它适用于 textarea。仍然不起作用的是 input type="number" 占位符。

@peeHaa : 当占位符内容大小长时在 safari 中无法正常工作 try placeholder="输入带有大数据的可选消息"，占位符仅显示“输入可选消息”，其他像文本溢出一样隐藏你能帮忙吗请帮我显示与chrome相同的所有数据？？