如果按下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'>