我怎樣才能在 textarea 占位符上有 2 種不同的字體大小和換行符？

Question

所以我被要求做你在屏幕截圖中看到的事情。 這對我來說是新的。 它是一個帶有換行符和 2 種不同字體大小的占位符。

<div class="form-group pop-label">
  <textarea id="inquiry-store-location" class="form-control" name="store_location" placeholder="Store or Location" required></textarea>
  <label for="inquiry-store-location">Store or Location</label>
</div>

到目前為止，這就是我的代碼/HTML 的樣子。

有任何想法嗎？

這是設計的截圖：

Answer 1

不可能將文本區域更改為具有兩種不同的文本大小。 最接近占位符的只是兩行文本。

得到你想要的，基本思想是向上移動 label 並向文本區域添加填充以向下移動占位符。

當用戶在文本區域中輸入文本時，您希望發生什么還不清楚。

 textarea { height: 150px; width: 300px; padding-top: 50px; padding-left: 30px; }.pop-label { position: relative; }.pop-label label { position: absolute; top: 1em; left: .5em; font-size: 1.2em; color: #888; }

 <div class="form-group pop-label"> <textarea id="inquiry-store-location" class="form-control" name="store_location" placeholder="I like to eat cheese on crackers." required></textarea> <label for="inquiry-store-location">Store or Location</label> </div>

如果您希望文本在他們添加文本時消失

 .pop-label { position: relative; }.pop-label textarea { height: 150px; width: 300px; transition: all.5s ease; }.pop-label textarea:invalid { height: 100px; width: 270px; padding-top: 50px; padding-left: 30px; }.pop-label textarea + label { display: none; }.pop-label textarea:invalid + label { position: absolute; display: block; top: 1em; left: .5em; font-size: 1.2em; color: #888; }

 <div class="form-group pop-label"> <textarea id="inquiry-store-location" class="form-control" name="store_location" placeholder="I like to eat cheese on crackers." required></textarea> <label for="inquiry-store-location">Store or Location</label> </div>

現在您可以使用這樣的技巧，但您無法完全控制文本和大小。

 textarea { height: 150px; width: 300px; }

 <div class="form-group pop-label"> <textarea id="inquiry-store-location" class="form-control" name="store_location" placeholder=" &#10;&#10;I like to eat cheese on crackers." required></textarea> </div>

Answer 2

這就是你需要的。 我是用 javascript 做的。但這不是一個完整的答案。 我目前正在嘗試弄清楚如何更改普通字符串變量的字體。

 let ph_1 = 'Placeholder_1'; let ph_2 = ' \n\nPlaceholder_2'; let ph_full = ph_1 + ph_2; textarea_input = document.querySelector('#inquiry-store-location'); textarea_input.setAttribute('placeholder', ph_full);

 #inquiry-store-location { width: 100%; height: 100px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group pop-label"> <textarea id="inquiry-store-location" class="form-control" name="store_location" placeholder="" required></textarea> </div>