Question

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

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

我的工作代码：

<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() );
    });
});

希望这有帮助。

＆＃13;

$(function() {
  $('.input').on('input', function(){
    var source_name = $(this).attr('name');

    $('#output-'+source_name).text( $(this).val() );
  });
});

＆＃13;

<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>

＆＃13;

Answer 2

＆＃13;

  $(document).ready(function () {
    $(":text").keyup(function () {
      $("p").text($(":text").val());
    });
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form>
  User Name: <br>
  <input type="text" >
  <input type="submit" value="Submit">
</form>
<br>
<p>
</p>

＆＃13;

Answer 3

希望这有助于解决您的问题。

$('#input-address').keyup(function() {

    var address= $('#input-address').val();        

    $('#output-address').html(address);
    });

在表单中键入时更改div中的文本

3 个答案: