立即输入并更改div innerhtml

Question

我试图做一个函数，在输入中键入一些内容，它立即更改div附近的innerhtml 。

的HTML

<input type="text" class="form-control" id="span_data" placeholder="Example input">
<div id="round" style="border:1px solid gray; width:40px; height:40px;float: right; border-radius: 50%; background-color: #cc66ff;align-items: center;justify-content: center;display: flex;">+</div>

jQuery的

 $(document).on('change', '#span_data', function(e) {
    e.preventDefault();
    var data = $('#span_data').val();
    $('#round').html(data);
});

仅当我在输入之外单击时，innerhtml才会更改，而在键入时不会更改。

我在哪里做错了？这是小提琴

Answer 1

您应该使用input不change

$(document).on('input', '#span_data', function(e) {
  e.preventDefault();
  var data = $('#span_data').val();
  console.log(data);
  $('#round').html(data);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" class="form-control" id="span_data" placeholder="Example input">



<div id="round" style="border:1px solid gray; width:40px; height:40px;float: right; border-radius: 50%; background-color: #cc66ff;align-items: center;justify-content: center;display: flex;">+</div>