ホバーイベントのSetInterval

Question

私はここで入力フィールドを持っています。入力フィールドにアスタリスクを追加すると、ホバー入力テキストが無くなるとアスタリスクが追加されます。どのようにsetInterval（たぶん）と私はそれがホバリングされたときに毎秒入力フィールドにアスタリスクを追加することができますか？

$('body').append("<input type='text' />"); 

    $('input').hover(function() { 
    $(this).val('*' + $(this).val()); 
    }) 
$('input').mouseleave(function() { 
    $(this).val(''); 
}) 

Answer 1

mouseeleave

var input = $('<input />', { 
 
    type : 'text', 
 
    on : { 
 
    mouseenter : function() { 
 
     var self = this; 
 
     
 
     $(this).val('*').data('interval', setInterval(function() { 
 
     self.value += '*'; 
 
     },1000)); 
 
    }, 
 
    mouseleave : function() { 
 
     clearInterval($(this).data('interval')); 
 
     this.value = ""; 
 
    } 
 
    } 
 
}); 
 

 
$('body').append(input);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

FIDDLE

Answer 2

これを置き換えます

$(this).val('*' + $(this).val()); 

トリックあなたはまた、機能を防ぐためにclearIntervalを使用する必要が

Answer 3

を行う必要があります

setInterval(function(){ $("#input").val($("#input").val() + "*") }, 1000); 

で実行するときにマウス入力を残す。

setIntervalが返すIDを保存する必要があります。マウスが離れる（またはマウスが再び移動する）と、前の間隔のIDをクリアすることができます。

$('body').append("<input type='text' />"); 
    var id = null; 
    $('input').hover(function() { 
    var element = this; 
    clearInterval(id) 
    id = setInterval(function() { 
    $(element).val('*' + $(element).val()); 
    }, 1000) 

    }) 
    $('input').mouseleave(function() { 
    clearInterval(id) 
    console.log(id); 
    $(this).val(''); 
    }) 

https://plnkr.co/edit/wKiw8B8oihQBZU5gTcdk?p=preview

Answer 4

Yでそれをクリアする間隔を使用し$.dataに格納hoverでは、両方のアクションを渡すことができるので、実際にはmouseleaveを必要としません。
.hover(handlerIn, handlerOut)。 （handlerOutのシーンの背後にあるmouseleave）

はアスタリスクが毎秒限り、まだマウスなどの入力に追加されなければならないホバー

var interval = null; 
$('input').hover(function() { 
    interval = setInterval(function(el){ 
    $(el).val($(el).val() + "*"); 
    }, 1000, this); 
}, function(){ 
    clearInterval(interval); 
    $(this).val(''); 
}); 

JSFiddle demo