Question

如何复制用户输入的数字并通过{this.state.markers.map(marker => ( <Marker coordinate={marker.latlng} title={marker.title} description={marker.description} /> ))}或javascript显示在弹出窗口上？

我的意思是当用户键入大于零的数字时，例如：jquery，弹出框显示1000。

$(document).ready(function() {
    //this calculates values automatically 
    getPriceAndPopUp();
    $("#price").on("keydown keyup", function() {
    	getPriceAndPopUp();   
    });
});

function getPriceAndPopUp() {
    var price = document.getElementById('price').value;
    if (!isNaN(price) && price > 0) {
        alert(price);
    }
}

Answer 1

您需要等待用户完成键入后才能显示该号码，为此您需要使用超时功能来延迟警报显示

$(document).ready(function() {
  var timeout;
  //this calculates values automatically 
  getPriceAndPopUp();
  $("#price").on("keydown keyup", function() {
    clearTimeout(timeout);
    timeout = getPriceAndPopUp();
  });
});

function getPriceAndPopUp() {
  var price = document.getElementById('price').value;

  return setTimeout(function() {

    if (!isNaN(price) && price > 0) {
      $('[data-content]').attr('data-content',price);
      $('[data-toggle="popover"]').popover('show');
    }
  }, 400);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<body>

  <form>
    Price:<br>
    <input type="number" name="price" id="price" class="form-control" min="0" required data-toggle="popover" data-placement="bottom" data-content="0"/>
  </form>


</body>

Answer 2

您可以在blur事件中做到这一点。

$(document).ready(function() {
  //this calculates values automatically 
  getPriceAndPopUp();
  $("#price").on("blur", function() {
    getPriceAndPopUp();
  });
});

function getPriceAndPopUp() {
  var price = document.getElementById('price').value;
  if (!isNaN(price) && price > 0) {
    alert(price);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <form>
    Price:<br>
    <input type="number" name="price" id="price" class="form-control" min="0" required />
  </form>
</body>

输入时按下和按下时显示弹出窗口

2 个答案: