如何实时显示输入值以显示输入与div id相同的名称？或任何其他方式？

Question

我需要用jquery实时显示输入值。如何更改 div 与输入名称或其他方式相同的文本？

$('.inputs').keyup(function(){
  var namer = $('.inputs').attr('name');
  $('#' + namer).text($(this).val());
});

我希望 XX 命名的输入值以 div 显示在 XX id 中。

Answer 1

如果您确保运行您的代码在 document.ready() 回调中，它似乎工作正常：

$(document).ready(function() {
  $('.inputs').keyup(function(){
    var namer = $('.inputs').attr('name');
    $('#' + namer).text($(this).val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="someInputName" class="inputs"/>
<div id="someInputName"></div>

Answer 2

您可以通过在 keyup 函数中的目标元素中写入获得的文本来轻松做到这一点

$('.inputs').keyup(function(){
  var namer = $('.inputs').attr('name');
  $('target element').text(namer);
});

Answer 3

如果您只想从输入中更新 div 文本（单一方式），请执行以下操作：

<input type="text" id="inputText">
<div id="dynamicText">Original Text</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript">
    $('#inputText').keyup(function() {
        var text = $(this).val();
        $('#dynamicText').text(text);
    });
</script>

如果您想将 div 文本显示为输入的原始值：

<input type="text" id="inputText">
<div id="dynamicText">Original Text</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript">
    var OriginalText = $('#dynamicText').text();
    $('#inputText').val(OriginalText);
    $('#inputText').keyup(function() {
        var text = $(this).val();
        $('#dynamicText').text(text);
    });
</script>

如何实时显示输入值以显示输入与div id相同的名称？或任何其他方式？

how to real time display input value to display to input name same with div id? or any other way?

javascript

input

real-time