javascript - 使用 bootstrap 和 javascript 在文本框区域 onfocus 事件中添加图标

Question

有谁知道如何将一些 Bootstrap 图标添加到我的文本区域。图标应显示在焦点上并隐藏在焦点外。这个文本区域与 Facebook Add new status textarea 相似，即使不一样。

我所能做的就是使用 JavaScript 扩展和缩小文本区域的 onfocus/focusout 事件。

这是我的代码:

HTML:

<div class="jumbotron" style="height:150px">
    <div class="col-lg-12">
        <textarea class="expand" rows="3" cols="20"></textarea>
    </div>
</div>

JS:

<script type="text/javascript">
    $('textarea.expand').focus(function () {
        $(this).animate({ height: "4em" }, 500);
    });

    $('textarea.expand').focusout(function () {
        $(this).animate({ height: "2em" }, 500);
    });
</script>

CSS:

.expand
{
    height: 2em;
    width: 50%;
}

我也尝试在 JS 中使用 .css 并尝试添加图标，但我想我没有以正确的方式这样做，因为没有显示任何内容。

$('textarea.expand').focus(function () {
        $(this).animate({ height: "4em" }, 500);
        $(this).css('glyphicon glyphicon-camera');
    });

Textarea 应该像这样:

OnFocusOut:

聚焦:

有人可以帮助我，并告诉我如何做到这一点...因为我的 JS 很糟糕。

Answer 1

一个简单的答案可以是为文本区域创建一个兄弟 div 元素，它将包含所有图标，显示聚焦文本区域的 div 并将其隐藏在文本区域的焦点之外