如何获取浏览器提示中的输入值

Question

我需要创建自己的prompt功能。

在下面的示例中，我该怎么说：

var x = my_prompt('DO SOMETHING');
console.log(x);

因此，单击btnb我需要单击btna后派生的inputxt值。

$('#btnb').on('click', function(){
my_prompt('DO SOMETHING');
});
function my_prompt(info){
$('#dginfo').text(info);
$('#dialog').show();
$('#inputxt').focus();
}

.dialog{
display:none;
position:fixed;
width:50%;
left:25%;
top:25px;
background:gold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='dialog' id='dialog'>
<div id='dginfo'></div>
<input type='text' class='inputxt' id='inputxt'>
<button id='btna'>OK</div>
</div>
<button id='btnb'>CLICK</div>

Answer 1

一种选择是将回调传递给 my_prompt ，当单击按钮时会调用该回调：

$('#btnb').on('click', function() {
  my_prompt('DO SOMETHING', (x) => {
    console.log('input entered: ' + x);
  });
});
function my_prompt(info, callback) {
  $('#dginfo').text(info);
  $('#dialog').show();
  $('#inputxt').focus();
  $('#btna').on('click', () => {
    callback($('#inputxt').val());
    $('#btna').off('click');
    $('#dialog').hide();
  });
}

.dialog {
  display: none;
  position: fixed;
  width: 50%;
  left: 25%;
  top: 25px;
  background: gold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='dialog' id='dialog'>
  <div id='dginfo'></div>
  <input type='text' class='inputxt' id='inputxt'>
  <button id='btna'>OK</div>
</div>
<button id='btnb'>CLICK</div>

要另外添加侦听器enter：

$('#btnb').on('click', function() {
  my_prompt('DO SOMETHING', (x) => {
    console.log('input entered: ' + x);
  });
});
$('#inputxt').on('keypress', ({ keyCode }) => {
  if (keyCode === 13) {
    $('#btna').click();
  }
});
function my_prompt(info, callback) {
  $('#dginfo').text(info);
  $('#dialog').show();
  $('#inputxt').focus();
  $('#btna').on('click', () => {
    callback($('#inputxt').val());
    $('#btna').off('click');
    $('#dialog').hide();
  });
}

.dialog {
  display: none;
  position: fixed;
  width: 50%;
  left: 25%;
  top: 25px;
  background: gold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='dialog' id='dialog'>
  <div id='dginfo'></div>
  <input type='text' class='inputxt' id='inputxt'>
  <button id='btna'>OK</div>
</div>
<button id='btnb'>CLICK</div>

Answer 2

只需将一个变量分配给 my_prompt 的返回值，并添加一个事件侦听器来执行此操作：

$('#btnb').on('click', function() {
  var data = my_prompt('DO SOMETHING');
});
function my_prompt(info) {
  $('#dginfo').text(info);
  $('#dialog').show();
  $('#inputxt').focus();
  return $("#btna").on("click", function() {
    return $("#inputxt").val(); 
}

.dialog {
  display: none;
  position: fixed;
  width: 50%;
  left: 25%;
  top: 25px;
  background: gold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='dialog' id='dialog'>
  <div id='dginfo'></div>
  <input type='text' class='inputxt' id='inputxt'>
  <button id='btna'>OK</div>
</div>
<button id='btnb'>CLICK</div>