有没有一种方法可以使用按键将焦点文字('|')从输入更改为另一个?

时间:2020-04-03 18:30:28

标签: javascript events input

我必须输入,我想按Enter并将注意力从第一输入更改为第二输入,而不仅仅是使用鼠标。

到目前为止,我在带有keypress事件的第一个输入(jogador1)中创建了一个事件监听器。在内部,我做了一个条件,如果第一个Input(jogador1)已经有一个数字,并且按键值为13,则应该做一些更改为第二个输入的操作。那是我不知道的那部分吗?

这是我的代码:

let jogador1 = document.querySelector('#jogador1');
let jogador2 =document.querySelector('#jogador2');
let output = document.querySelector('#output');

let button = document.querySelector('#button');

let letsCompareValues = (e) => {
    e.preventDefault();
    let value1 = jogador1.value;
    let value2 = jogador2.value;
    if (value1 === value2 && !isNaN(value1) && !isNaN(value2)) {

        output.innerHTML = 'there is a match';
        return
    } else {

        output.innerHTML ='there is no match';
    }

}

button.addEventListener('click', letsCompareValues);

jogador1.addEventListener('click', function(){
    jogador1.value = '';
    jogador2.value = '';
    output.innerHTML = '';
});

//HERE
jogador1.addEventListener('keypress', function(e){
    var code = e.keyCode;
    if(jogador1.value !== isNaN && code === 13){
        jogador2.focus;

    }
})
   <div>
       <label for="jogador1">Player 1</label>
       <input type="text" id="jogador1">
   </div>
   <div>
       <label for="jogador2">Player 2</label>
       <input type="text" id="jogador2">
   </div>



   <button id="button">JOGAR</button>


1 个答案:

答案 0 :(得分:1)

您已经关闭。 element.focus()是一个函数,因此需要括号才能调用它。

其他问题:

  • 您所指的是ID为'output'的元素,但没有这样的元素。
  • 您正在使用!== isNaN检查字符串是否为空。相反,您应该使用str !== '',或者最好使用str
  • 使用keyEvent.key代替keyEvent.code
  • 整理代码,然后要求人们花时间阅读它。这是对你的反映。
  • 在堆栈溢出时使用最小的示例,而不是代码转储。

let jogador1 = document.querySelector('#jogador1');
let jogador2 = document.querySelector('#jogador2');
let output = document.querySelector('#output');

let button = document.querySelector('#button');

let letsCompareValues = (e) => {
  e.preventDefault();
  let value1 = jogador1.value;
  let value2 = jogador2.value;
  if (value1 === value2 && !isNaN(value1) && !isNaN(value2)) {

    output.innerHTML = 'there is a match';
    return
  } else {

    output.innerHTML = 'there is no match';
  }

}

button.addEventListener('click', letsCompareValues);

jogador1.addEventListener('click', function() {
  jogador1.value = '';
  jogador2.value = '';
  output.innerHTML = '';
});

jogador1.addEventListener('keypress', function(e) {
  if (jogador1.value && e.key === 'Enter') {
    jogador2.focus();

  }
})
<div>
  <label for="jogador1">Player 1</label>
  <input type="text" id="jogador1">
</div>
<div>
  <label for="jogador2">Player 2</label>
  <input type="text" id="jogador2">
</div>

<div id="output"></diV>

<button id="button">JOGAR</button>