在表格中输入时更改div中的文本

我得到了这段代码，当用户在文本区域中输入时，在div中的实时更新文本。我不知道如何编辑它，所以我可以重复使用它几个匹配的div/input。在表格中输入时更改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>

来源

2017-08-06 Kenneth Poulsen

是你能如上所述使用它，但你应该附加一个共同的动态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>

来源

2017-08-06 09:33:00

好的，让我知道这是否正确。它获取所有“id = input-”并获取属性name =“？”的值并使用它来找到具有相同ID的匹配的div？所以输入字段的id只用于让函数知道，即必须获取name属性并使用它来查找匹配的div。这是这个部分，让我有点困惑：$（this）.attr（'name'） –

字段的id，是的，你可以在你的字段中使用'input'类。 ..'$（this）.attr（'name'）'将获得当前编辑字段的名称，以定位相关的'div'，其id为'output-CURRENT EDITED FIELD的名称'。 –

检查我更新的代码片段使用一个普通的类'输入'而不是ID的字段。 –

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

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

来源

2017-08-06 09:29:50

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

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

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

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

来源

2017-08-06 10:39:28

在表格中输入时更改div中的文本

回答

相关问题