【问题标题】:Is there a way using keypress to change the focus writting( '| ' )from an input to another?有没有办法使用按键将焦点写入('|')从输入更改为另一个?
【发布时间】:2020-04-03 18:30:28
【问题描述】:

我必须输入,我想按下回车键并将注意力从第一个输入更改为第二个输入,而无需仅使用鼠标。

到目前为止,我在第一个输入 (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>


【问题讨论】:

    标签: javascript events input


    【解决方案1】:

    你已经接近了。 element.focus() 是一个函数,所以你需要括号来调用它。

    其他问题:

    • 您指的是一个 id 为“输出”的元素,但没有这样的元素。
    • 您正在使用!== 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>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2015-04-11
      • 1970-01-01
      • 1970-01-01
      • 2016-06-07
      • 1970-01-01
      • 1970-01-01
      • 2021-06-27
      相关资源
      最近更新 更多