如何使用jquery将div附加到textarea的底部

Question

我可以在网页上有多个 html textarea 框，当任何 textarea 获得焦点时，我想在它的正下方显示（或创建）一个 div。当焦点离开时，我想隐藏（或销毁）div。当不同的文本区域获得焦点时，我希望发生同样的事情。一些细节：

1. 文本区域可以有多种宽度和高度
2. 附加到 textarea 底部的 div 将是固定不变的，例如 200px 宽和 40px 高。无论其上方文本区域的高度/宽度如何，它都不会改变。
3. 用户不需要与 div 交互，事实上也不应该。它将显示“x of xx characters used”或类似内容。它仅用于显示，但 div 的内容会随着用户键入而不断变化。 （希望这不会从文本区域移除焦点并隐藏 div）
4. 一次只能看到一个“div-underneath-textarea”。这意味着甚至只需要 1 个 div。如果这是最简单的，它可以即时创建。
5. 应该在 textarea 获得焦点时创建 Div。
6. 应该在 textarea 失去焦点时销毁 Div。
7. 每次按下按键时，div 的内容都必须改变。
8. div 需要精确定位在 textara 下方。

使用 jquery 实现这一目标的最直接方法是什么？我认为动态创建（然后销毁）的 div 可能是理想的，除非由于某种原因它存在问题。

我主要需要关于焦点/模糊时动态 div 创建/销毁以及将该 div 锚定到 textarea 底部的帮助。

提前致谢。

Answer 1

您可以非常简单地使用insertAfter() 在focusin 的文本区域之后插入一个div。然后在 focusout 上，您可以删除该 div。然后，当您说每次按下键时 div 的内容必须更改时，我不确定您想要发生什么。如果您希望它显示 textarea 的内容，您可以使用 keyup 功能并仅显示该文本或其他内容。如果您指定想要更好地发生什么，我可以更好地提供帮助。但是所有这些都表明您可以执行以下操作：

//inserts the div under the textarea
$('textarea').on('focusin', function(){
  $('<div class="added-div">Added Div</div>').insertAfter(this);
});
//removes the added div and clears the textarea
$('textarea').on('focusout', function(){
  $('.added-div').remove();
  $(this).val('');
});
//updates the added div with textarea content
$('textarea').keyup(function () {
  var textareaContent = $(this).val();
  $('.added-div').html(textareaContent);
});

textarea{
  display:block;
  margin:10px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>
<textarea></textarea>
<textarea></textarea>
<textarea></textarea>

Answer 2

我尝试尽可能简单地做到这一点..看看这是否有帮助.. 我已经创建了模板 div，然后在焦点上我只是在每个文本区域之后附加它。然后在焦点输入/输出上只是隐藏它，而不是破坏和重新创建，这在我的书中很昂贵，我还包括简单的文本操作在那个目标 div 中。干杯

var templ = $('<div class="under"></div>');
// show when mouse goes in
$('textarea').on('mouseover', function(el){
  $(this).focus();
});
$('textarea').on('focus', function(el){
  // show div under that textarea
  if( ! $(this).next().hasClass( 'under') ) $(this).after( $(templ).clone() );
  $(this).next().show();
});
// hide when mouse goes out
$('textarea').on('mouseleave focusout', function(el){
  $(this).next().hide();
});
// do some stuff..
$('textarea').on('keyup', function(el){
  $(this).next().text( $(this).val().length );
});

.ta{
  width: 20%;
  height: 50px;
}
.relative{ position: relative; display: inline; }
.under{
  background-color:red; color: blue;
  width: 100%;
  height: 50px;
  position: absolute;
  top: 30px; left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="relative"><textarea class="ta t1"></textarea></div>
<div class="relative"><textarea class="ta t2"></textarea></div>
<div class="relative"><textarea class="ta t3"></textarea></div>
<div class="relative"><textarea class="ta t4"></textarea></div>