将 textarea 占位符文本放在底部

Posted 2023-03-05

【中文标题】将 textarea 占位符文本放在底部

【英文标题】：Position textarea placeholder text on bottom

【发布时间】：2017-06-03 12:33:27

【问题描述】：

我想将 textarea 的占位符文本放置在 textarea 的底部。这是我的代码：

<p class="text">
    <textarea name="text" class="feedback-input" id="comment" placeholder="Vos remarques"></textarea>
</p>

CSS：

textarea 
    width: 100%;
    height: 150px;
    line-height: 150%;
    resize:vertical;

这是完整的codepen。我想将文本区域和输入的占位符设置为靠近输入和文本区域的底部。目前，它们位于文本区域和输入的顶部。有什么方法可以选择文本区域和输入的占位符以及靠近文本区域底部、靠近边框的位置吗？

【问题讨论】：

你是什么意思“把我的占位符文本区域放下”？

对不起，我试着放一个链接。 codepen.io/elkhe89/pen/oBBGPj我的意思是修改占位符的位置。我想把它放在边框旁边。

我编辑了这个问题，使其更适合该网站。编辑您需要的内容。

【参考方案1】：

我不知道仅使用 CSS 来解决您的问题的解决方案。 我已经使用 CSS + javascript 创建了一个解决方案。

html：

<div class="form-group">
    <label class="placeholder">Vos remarques</label>
    <textarea name="text" class="feedback-input" id="comment"></textarea>
</div>

CSS：

.form-group 
    position: relative;

textarea 
    width: 100%;
    min-height: 150px;
    resize: vertical;
    position: relative;

.placeholder 
    bottom: 10px;
    color: #ccc;
    font-family: arial;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 1;
    -webkit-transition: all ease-out 0.5s;
    transition: all ease-out 0.5s;

JavaScript (jQuery)：

$(document).ready(function()
    $('.feedback-input').on('input', function()
        if ( $(this).val().length > 0 ) 
           $(this).siblings().css("opacity", "0");
         else 
           $(this).siblings().css("opacity", "1");
        
    );
);

codepen.io Example

【讨论】：

嗨 Cesar，我找到了一个 Css 解决方案：textarea::-webkit-input-placeholder width: 100%;高度：50px；行高：100%；调整大小：垂直；

但是现在不知道怎么放左下角

如果它对你有用，很好。但对我来说，你的代码不起作用。也许我不明白你需要什么，祝你好运。

你有没有找到解决这个@LindaAvernistan 的方法？