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

Question

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

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

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

因此，点击btnb，我需要点击inputxt之后得出的btna的值。

$('#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>