占位符在 Textarea 中不可见答案

【问题标题】：Placeholder not visible in Textarea占位符在 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> 之间的空白。它们应该在同一条线上，它们之间没有任何东西。否则，那些打开和关闭标签之间的任何东西都被认为是它的值，因为它不是空的，所以它不会显示占位符。

标签： html

【解决方案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>

删除了空格

【讨论】：