Question

我这里有输入字段，当我在输入字段上悬停星号添加时，当我丢失悬停输入文本时是干净的。如何使用setInterval（也许）我可以在输入字段中每秒添加额外的星号？

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

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

Answer 1

使用间隔并将其存储在$.data中以在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());

使用

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

应该做的伎俩

Answer 3

您还必须使用clearInterval来阻止鼠标离开输入时执行该功能。

您应该存储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

您实际上并不需要mouseleave，因为在hover中您可以通过这两项操作：
.hover( handlerIn, handlerOut )。（在handlerOut的场景后面是mouseleave）

将this（输入）添加到悬停时间间隔

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

JSFiddle demo

用于悬停事件的SetInterval

4 个答案: