Question

我有一个脚本每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; 
    }
}

Answer 1

更新输入类型，如

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

同时更新

setInterval(change, 2000);

到

var tt=setInterval(change, 2000);

在脚本中添加myFunction

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

Answer 2

在致电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

Answer 3

试试这个：

//设置间隔时间

interval_variable = setInterval（change，2000）;

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

时

clearInterval（interval_variable）;

Answer 4

真正简单的解决方案是检查输入是否在函数内部有焦点，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

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

4 个答案: