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

Question

有谁知道如何在textarea中添加一些引导程序图标。图标应显示在焦点上并隐藏在焦点上。这个textarea类似，如果不是Facebook添加新状态textarea。

我所能做的就是使用JavaScript扩展和缩小textarea 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在：

的onfocus：

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

Answer 1

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

Answer 2

此示例使用选择器

.parent:hover .links{}

但可以编辑为

.parent:focus .links{} 

如果需要的话。但是，为了向您展示这一点，我在下面设计了一个简单的演示：

＆＃13;

＆＃13;

.parent{
  height:100px;
  width:70%;
  background:red;  
  position:relative;
  }

.parent:hover .links{
  display:block;
  }

.links{
  display:none;
  position:absolute;
  bottom:0;
  }

＆＃13;

<div class="parent">
  <div class="child">

    <div class="links">
      facebook twitter etc
      <img src="http://placekitten.com/g/20/20" alt="" />
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

使用兄弟选择器

的示例

以下是使用兄弟选择器

的工作示例

input:focus + .items

选择类.items，其中有一个输入＆＃39;的兄弟。它有一个焦点（即你正在寻找的东西）

＆＃13;

＆＃13;

#parent{
  height:100px;
  width:80%;
  background:red;
  position:relative;  
}

.items{  
  bottom:0;
  padding:5px;
  display:none;
}

 input:focus + .items{
  display:block;
  }

＆＃13;

<div id="parent">
    <input type="text" placeholder="enter text"/>
  <div class="items">
     <img src="http://placekitten.com/g/20/20" alt=""/>
    <img src="http://placekitten.com/g/20/20" alt=""/>
    <img src="http://placekitten.com/g/20/20" alt=""/>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;