Блог

Главная - Вопросы по программированию - скрыть текстовое поле, если mouseleave превышает определенное время в jQuery

скрыть текстовое поле, если mouseleave превышает определенное время в jQuery

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я должен скрывать текстовое поле, только если пользователь зависает> 2 секунд. 

 <div id="content">
 <input type="text" id="txt1" />
</div>


$('#content').on('mouseleave', function(){
   $('#txt1').delay(2000).hide();    
});

Это будет ждать 2 секунды, прежде чем скрыть текстовое поле. Но если пользователь вернется в течение 2 секунд, он все равно скроется. Как предотвратить это?

Комментарии:

1. В вашем примере, когда пользователь покидает ввод, он скрывается через 2 секунды. Ты этого хочешь?

2. Если пользователь возвращается в течение 2 секунд, то он не должен скрываться.

3. Внимание всем, уже есть 5 ответов setTimeout ; пожалуйста, прекратите отвечать на это setTimeout .

Ответ №1:

Используйте setTimeout/clearTimeout вместо:

 var clr;
$('#content').on('mouseleave', function () {
    clr = setTimeout(function () {
        $('#txt1').hide();
    }, 2000)
}).on('mouseenter', function () {
    clearTimeout(clr)
})

Также обратите внимание, что задержка в вашем примере вообще не будет работать, поскольку .метод delay() задерживает выполнение функций, которые следуют за ним в стандартной очереди эффектов или в пользовательской очереди. Это не задержит формы без аргументов .show() или .hide(), которые не используют очередь эффектов.

Пример jsFiddle

Ответ №2:

Используйте старую добрую моду setTimeout и clearTimeout

 var leaveTimeout;
$('#content').on('mouseleave', function() {
   leaveTimeout = setTimeout(function() {
      $('#txt1').hide();
   }, 2000);   
})
.on('mouseenter', function() {
   clearTimeout(leaveTimeout);
});

Ответ №3:

Как насчет более простого решения CSS: http://jsfiddle.net/2Jtrb/2 /.

HTML:

 <div id="content">
    <input type="text" id="txt1" />
</div>

CSS:

 div {
    outline: 1px dotted #000;
}

div > input {
    visibility: hidden;
    -webkit-transition: visibility 2s;
    transition: visibility 2s;
}

РЕДАКТИРОВАТЬ: ввод также останется видимым, если он сфокусирован.

 div:hover > input, input:focus {
    visibility: visible;
    transition-duration: 0s;
}

Ответ №4:

Попробуйте это…

 var theTimer;

$('#content').on('mouseleave', function(){
    theTimer =  setTimeout(function() {
       $('#txt1').hide();    
    }, 2000);
});

$('#content').on('mouseenter', function(){
    clearTimeout(theTimer); 
});

ДЕМОНСТРАЦИЯ

Ответ №5:

Если вы используете setTimeout , вы можете отменить тайм-аут, если пользователь снова войдет в текстовую область. Этот код выглядит примерно так:

 var timeoutHandle;
$('#content').on('mouseleave', function(){
   timeoutHandle = setTimout(
      function () {
        timeoutHandle = undefined;
        $('#txt1').hide();
      }, 2000);
});

$('#content').on('mouseenter', function(){
   if (timeoutHandle) clearTimeout(timeoutHandle);
});

Кстати, это похоже на то, что предоставляют другие плагины, поэтому вы можете рассмотреть возможность просмотра плагина hover intent здесь: http://cherne.net/brian/resources/jquery.hoverIntent.html .

Ответ №6:

Вы можете попробовать это:-

 var typingTimer;
$('#content').on('mouseleave', function(){
typingTimer = setTimeout(function(){
$('#txt1').hide();  
},2000);
});
$('#content').on('mouseenter', function(){
clearTimeout(typingTimer);
});

Ответ №7:

Используйте функцию setTimeout. 

 var timeout = null; 
$('#content').on('mouseleave', function() { 
    timeout = setTimeout(function() { $('#text1').hide();
});

Затем, когда пользователь вводит div, снимите тайм-аут.

 $('#content').on('mouseenter', function() {
    clearTimeout(timeout);
});

Я написал это, ничего не просматривая, так что, надеюсь, я ничего не перепутал 😉