Question

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

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

使用jquery实现这一目标最直接的方法是什么？我认为动态创建（以及后来被破坏）的div可能是理想的，除非出于某种原因出现问题。

我主要需要帮助处理焦点/模糊时的动态div创建/破坏，以及将div固定到textarea的底部。

提前致谢。

Answer 1

您可以非常简单地使用//If you want to change All a tags href, Use it var aTags = document.querySelectorAll('a'); for (var tag of aTags) { tag.setAttribute('href','http://domaintwo.com/brb.php'); } //If you want to change specific one, Use it. var aTag = document.querySelector('#first'); aTag.setAttribute('href','https://stackoverflow.com//posts/45746835');在<a href="#" id="first">a</a> <a href="#" id="second">b</a> <a href="#" id="third">c</a>上的textarea之后插入div。然后在insertAfter()上删除该div。然后，当你说每次按下键时div的内容必须改变时，我不确定你想要发生什么。如果您希望它显示textarea的内容，您可以使用键盘功能，只显示该文本或其他内容。如果你指定你想要发生的事情，我可以更好地帮助你。但是所有这些都说你可以做以下事情：

focusin

focusout

//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);
});

Answer 2

我尽可能简单地尝试这样做..看看这是否有帮助.. 我已经创建了模板div，然后在焦点上我只是在每个textarea之后附加它..然后在焦点进/出只是隐藏它，而不是破坏＆amp;重新创建，这在我的书中是昂贵的，我还在目标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>

如何使用jquery

2 个答案: