占位符在 Textarea 中不可见
Posted
技术标签:
【中文标题】占位符在 Textarea 中不可见【英文标题】：Placeholder not visible in Textarea 【发布时间】：2020-03-20 20:11:19 【问题描述】：我在 html 中的 textarea 有一个小问题，当我添加占位符属性时，它似乎不可见，直到我突出显示并按下退格键，光标也出现在离初始最左边位置更远的位置。
<html>
<head>
<title>
Post a Task
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="card" style="width: 50rem; margin-top: -40px; padding: 20px; margin: auto;">
<div class="card-body">
<h5 class="card-title text-center" id="Signup_Title">POST YOUR TASK </h5>
<!--<h6 class="card-title text-center" id="Signup_Sub_Title"></h6>-->
<form>
<div id="formpage_1">
<div class="form-row">
<div class="form-group col-md-12">
<label>Brief Title:</label>
<textarea class="form-control" cols="50" rows="2" placeholder="Brief Title">
</textarea>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label>Detailed Description:</label>
<textarea class="form-control" cols="50" rows="8" placeholder="Detailed Description">
</textarea>
</div>
</div>
<div class="form-group">
<button type="menu" class="btn btn-primary form-control"
style="background-color:#f9d342 ; color:#252218 ; border: none; width: 30%;">Attach File
</button>
</div>
</div>
</body>
</html>【问题讨论】：
您的占位符在 Chrome 中工作正常 您是否尝试过删除<textarea> 元素内的换行符？在 Firefox 中运行良好。
@Wales77 请提供minimal reproducible example。如果我们无法重现问题，我们将无法帮助您。
@Wales77 <textarea cols = "30" rows = "8" placeholder = "Detailed Description"> 和 </textarea> 之间的换行符。删除它。
@Wales77 正如塞巴斯蒂安所说，删除<textarea> 和</textarea> 之间的空白。它们应该在同一条线上，它们之间没有任何东西。否则，那些打开和关闭标签之间的任何东西都被认为是它的值，因为它不是空的，所以它不会显示占位符。
【参考方案1】：
<html>
<head>
<title>
Post a Task
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="card" style="width: 50rem; margin-top: -40px; padding: 20px; margin: auto;">
<div class="card-body">
<h5 class="card-title text-center" id="Signup_Title">POST YOUR TASK </h5>
<!--<h6 class="card-title text-center" id="Signup_Sub_Title"></h6>-->
<form>
<div id="formpage_1">
<div class="form-row">
<div class="form-group col-md-12">
<label>Brief Title:</label>
<textarea class="form-control" cols="50" rows="2" placeholder="Brief Title"></textarea>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label>Detailed Description:</label>
<textarea class="form-control" cols="50" rows="8" placeholder="Detailed Description"></textarea>
</div>
</div>
<div class="form-group">
<button type="menu" class="btn btn-primary form-control"
style="background-color:#f9d342 ; color:#252218 ; border: none; width: 30%;">Attach File
</button>
</div>删除了空格
【讨论】：
以上是关于占位符在 Textarea 中不可见的主要内容，如果未能解决你的问题，请参考以下文章