JavaScript - 停止焦点事件的计时器

时间:2014-05-14 13:29:50

标签: javascript

我有一个脚本每2秒更改一次文本框中的文本。我想让它停止(计时器)并在用户点击并关注文本框时清除文本框。

var text = ["1", " 2", "3"];
var counter = 0;
var elem = document.getElementById("txt1");

setInterval(change, 2000);

function change() {
document.getElementById("txt1").value = text[counter]; //data is the element
    counter++;
    if(counter >= text.length) { 
        counter = 0; 
    }
}

4 个答案:

答案 0 :(得分:2)

更新输入类型,如

 <input type="text" onfocus="myFunction()">

同时更新

setInterval(change, 2000);

var tt=setInterval(change, 2000);

在脚本中添加myFunction

function myFunction(){
   clearInterval(tt);
   document.getElementById("txt1").value = "";
}

答案 1 :(得分:1)

在致电setInterval()时存储时间间隔ID:

var interval = setInterval(change, 2000);

然后在focus()处理程序中取消它:

function stopit()
{
  if (interval) {
    clearInterval(interval);
    interval = false;
    elem.value = "";
  }
}

if (elem.addEventListener) {
  elem.addEventListener('focus', stopit, false); 
} else if (elem.attachEvent)  {
  elem.attachEvent('onfocus', stopit);
}

请注意,stopit()只会清除间隔(和文字)一次 - 这样,如果用户输入内容,重点放在其他地方,然后重新聚焦,我们就不会丢弃他们的输入。< / p>

示例:http://codepen.io/paulroub/pen/AtxEr

答案 2 :(得分:0)

试试这个:

//设置间隔时间

interval_variable = setInterval(change,2000);

//当你想停止执行“改变”

clearInterval(interval_variable);

答案 3 :(得分:0)

真正简单的解决方案是检查输入是否在函数内部有焦点,document.activeElement保持焦点元素,只需将其与elem进行比较,如果它们相同则返回它

var text    = ["I want a smartphone with a big screen", "I don't want a smartphone made by a korean company", "I want a LED TV with high refresh rate"];
var counter = 0;
var elem    = document.getElementById("txt1");

elem.addEventListener('focus', function() {this.value=''}, false);

setInterval(change, 2000);

function change() {
    if (document.activeElement == elem) return;

    elem.value = text[counter];
    counter++;
    if(counter >= text.length) { counter = 0; }
}

FIDDLE