0

今天早些时候，我发布了一篇关于 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/

4

1 回答 1

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/

希望这会有所帮助。

于 2013-06-04T19:34:48.220 回答