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

Question

有谁知道如何将一些 bootstrap 图标添加到我的文本区域。图标应显示在焦点上并隐藏在焦点外。这个文本区域与 Facebook Add new status 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');
    });

文本区域应该像这样：

OnFocusOut:

聚焦：

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

Answer 1

这个例子使用的是选择器

.parent:hover .links{}

但可以编辑为

.parent:focus .links{}

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

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

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

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

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

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

使用同级选择器的示例

这是一个使用兄弟选择器的工作示例

input:focus + .items

选择 class .items 其中有 'input' 的兄弟姐妹，后者有焦点（即您要查找的内容）

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

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

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

<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>

Answer 2

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

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

Add icons inside textbox area onfocus event, using bootstrap and javascript

html

javascript

css

jquery

twitter-bootstrap

使用同级选择器的示例