Question

今天早些时候，我发布了一篇关于140字符限制的帖子，该部分现已解决。现在，我正在寻找另一个棘手的事情，那就是保持140个字符限制控制，并且仍然保持另一个检查，即检查div的特定部分是否被点击，如果单击DIV，则textarea应该保持开放，即80px高，如果char限制器报告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

我可能找到了解决问题的方法。这不是最干净的解决方案，但它确实有效。我必须使用鼠标位置来跟踪点击来自哪里bc 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更改bc工具栏在第一次焦点后得到一个奇怪的定位。

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/

希望这有帮助。

单击jQuery下面的特定div时，尽管140限制，仍保持textarea打开

1 个答案: