javascript - jQuery 单击下方的特定 div 时，尽管有 140 个限制，但仍保持 textarea 打开

Question

今天早些时候，我发了一篇关于 140 个字符限制的帖子，那部分现在已经解决了。现在，我要做另一件棘手的事情，那就是保持 140 个字符的限制控制，并且仍然保持另一个检查，即检查是否单击了 div 的特定部分，如果单击了 DIV，则 textarea 应该保持打开状态，即 80px 高，无论字符限制器报告 140 还是 139 等等。但是如果在这个 DIV 之外单击，textarea 应该回到它的初始高度，即 19px，如果限制器报告 140，否则它将保持打开状态；

这是我的 jQuery:

$(".comment-box").focus(function(){
        var parent = $(this).parent();
        $('#' + this.id).css({ 'height' : '80px' });
        $(parent).find('.comment-toolbar').css({ 'display' : 'block' });    
    }),
    $('.comment-toolbar').click(function(e){
        if(e.target == "in_or_out"){
            console.log("inside"); 
            $(".comment-box").css({ 'height' : '80px' }); 
        }
        else{ console.log("outside");  }
    }),
    $('.comment-box').focusout(function(){
        var parent = $(this).parent();
        if($(this).val().length > 0){

        }
        else{
            $('#' + this.id).css({ 'height' : '19px' });
            $(parent).find('.comment-toolbar').css({ 'display' : 'none' }); 
        }
    });

这是一个 jsfiddle: http://jsfiddle.net/3sCfG/56/

Answer 1

我可能已经找到了解决您问题的方法。这不是最干净的解决方案，但它确实有效。我不得不使用鼠标位置来跟踪点击的来源，因为 focusout 事件在点击之前触发，除了鼠标位置之外，无法判断点击的来源。

不太“干净”的部分是 if 语句，我必须使用它来检查点击是否在工具栏的范围内。也许您可以想出更好的方法来检查它。

JS:

var mousePos;
var hasFocus = false;//This is used to prevent the window.click from firing after a focus event

jQuery(document).ready(function(){
$(document).mousemove(function(e){
  mousePos = e;
 }); 
});

$(".comment-box").keydown(function () {
  var parent = $(this).parent();
  var text_max = 140;
  var length_reached = $(this).val().length;
  var remaining = text_max - length_reached;

  $(parent).find('.counter').html(remaining);

  if (remaining < 5 || remaining >= text_max) $(parent).find(".btn").prop("disabled", true);
  else $(parent).find(".btn").prop("disabled", false);
});

$(".comment-box").focus(function(e){
        var parent = $(this).parent();
        $('#' + this.id).css({ 'height' : '80px' });
        $(parent).find('.comment-toolbar').css({ 'visibility' : 'visible'});
        hasFocus = true;            
    });


 $('.comment-box').focusout(function(e){
var parent = $(this).parent();

var toolbox = $(parent).find('.comment-toolbar');
var offset = $(toolbox).offset();

    //Check if click occured within toolbar
if(mousePos.pageX >= offset.left && mousePos.pageY >= offset.top && mousePos.pageX <= (offset.left + $(toolbox).width()) && mousePos.pageY <= (offset.top + $(toolbox).height()))
{

}   
else if($(this).val().length > 0){

}
else{
    $('#' + this.id).css({ 'height' : '19px' });
    $(parent).find('.comment-toolbar').css({ 'visibility' : 'hidden' });    
}

hasFocus = false;
});

$(window).click(function(){
console.log('window click');
if(!hasFocus)
{
    for(var i=0;$('.comment-box').length;i++)
    {
        var commentbox = $('.comment-box')[i];
        var toolbox = $('.comment-toolbar')[i];
        var offset = $(toolbox).offset();

        if(mousePos.pageX >= offset.left && mousePos.pageY >= offset.top && mousePos.pageX <= (offset.left + $(toolbox).width()) && mousePos.pageY <= (offset.top + $(toolbox).height()))
        {
            return false;
        }   
        else if($(commentbox).val().length > 0){

        }
        else{
            $(commentbox).css({ 'height' : '19px' });
            $(toolbox).css({ 'visibility' : 'hidden' });    
        }
    }
}
});

我不得不对 CSS 做一个小改动，因为在第一次聚焦之后工具栏的位置很奇怪。

CSS:

.comment-toolbar{
  margin-top: 10px;
  display: block;
  border: 1px solid red; 
  width: 420px; 
  height: 45px;
  float: right; 
  visibility: hidden;/* Use visibility instead of display to show/hide toolbar */
}

http://jsfiddle.net/ExceptionLimeCat/Gx3tV/

希望对您有所帮助。