javascript - 在表单中输入时更改div中的文本

Question

我得到了这段代码，当用户在文本区域中输入时，div 中的实时更新文本。我不确定如何编辑它，所以我可以将它重新用于几个匹配的 div/输入。

是否可以使用某种通配符？

我的工作代码:

<textarea id="input-address" name="address" rows="5" class="form-control">{{ Auth::user()->address }}</textarea>
<div id="output-address">{{ Auth::user()->address }}</div>

$(function() {
    $source=$("#input-address");
    $output=$("#output-address");
    $source.keyup(function() {
       $output.text($source.val());
    });
});

我正在考虑这样的事情，但不确定如何处理:

<input type="text" id="input-first_name" name="first_name" class="form-control" value="{{ Auth::user()->first_name }}" required>    
<textarea id="input-address" name="address" rows="5" class="form-control">{{ Auth::user()->address }}</textarea>

<div id="output-first_name">{{ Auth::user()->first_name}}</div>
<div id="output-address">{{ Auth::user()->address }}</div>

<script type="text/javascript">
    $(function() {
        $source=$("#input-[name-match]");
        $output=$("#output-[name-match]");
        $source.keyup(function() {
           $output.text($source.val());
        });
    });
</script>

Answer 1

是的，你可以像上面描述的那样使用它，但是你应该附加一个通用的动态 input 事件，比如:

$(function() {
    //Attach 'input' event to all elements that have an 'id' start with 'input-'
    $('[id^="input-"]').on('input', function(){
        var source_name = $(this).attr('name');

        //Change the element that have 'id' equal to 'output-source_name'
        $('#output-'+source_name).text( $(this).val() );
    });
});

希望这对您有所帮助。

$(function() {
  $('.input').on('input', function(){
    var source_name = $(this).attr('name');

    $('#output-'+source_name).text( $(this).val() );
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="first_name" class="form-control input" value="first_name from controller" required>    
<br>
<textarea name="address" rows="5" class="form-control input">address  from controller</textarea>

<div id="output-first_name">first_name from controller</div>
<div id="output-address">address  from controller</div>