如果按 Enter 键，则从外部函数获取输入的值

Question

对从另一个函数获取结果感到困惑。

单击button我需要dgInput的值 - 如果按下键盘上的Enter。

$('button').on('click', function() {
  let str = fn();
  console.log(str);
});
function fn() {
  $('#dgInput').show().focus();
  $('#dgInput').on('keypress', function(e) {
    if (e.keyCode == 13) {
      return ($('#dgInput').val());
    }
  });
}

#dgInput {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<br><br>
<input type='text' id='dgInput'>

Answer 1

在我看来

这是一个 X/Y 问题

如果要在按下按钮后显示输入，请显示它。您仍然可以为其分配处理程序，而它不可见

对于非亲吻解决方案，请参阅带有承诺的答案。

$('#dgInput').on('keypress', function(e) {
  if (e.keyCode == 13) {
    console.log($('#dgInput').val());
  }
});
$('button').on('click', function() {
  $('#dgInput').show().focus();
});

#dgInput {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<br><br>
<input type='text' id='dgInput'>

Answer 2

fn无法返回该值，因为当fn返回时，用户尚未按 Enter 键，因此该值尚不可用。（有关此内容的更多信息，请参阅此问题的答案。

你可以fn返回值的承诺，然后让调用代码使用该承诺：

$('button').on('click', function() {
  // Prevent repeated clicks
  this.disabled = true;
  fn()
    .then(str => {
      console.log(str);
    })
    .catch(error => {
      console.log("Didn't get a value");
    })
    .finally(() => {
      // Allow clicks again
      this.disabled = false;
    });
});
function fn() {
  return new Promise((resolve, reject) => {
    var dgInput = $('#dgInput');
    dgInput.show().focus();
    dgInput.on('keypress', function(e) {
      if (e.keyCode == 13) {
        dgInput.off('keypress');
        dgInput.hide();
        resolve(dgInput.val());
      }
    });
    // Perhaps some event for the user not doing it, which would call `reject`
  });
}

#dgInput {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<br><br>
<input type='text' id='dgInput'>

Answer 3

问题如下：fn()没有返回值！ fn()仅将匿名事件侦听器函数设置为输入。因此，请改用：

$('button').one('click', function() {
  const var1="foo",
        var2="bar"
  fn(console.log,var1,var2);
});
function fn(onkeypress,...vars) {
  $('#dgInput').show().focus();
  $('#dgInput').on('keypress',function(e){
    if (e.keyCode == 13) {
      onkeypress($('#dgInput').val(),...vars);
    }
  });
}

#dgInput {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<br><br>
<input type='text' id='dgInput'>