如何实时显示输入值以显示与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

如果您只想从输入(单向(更新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>

Answer 3

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

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