Question

基本上我在这里尝试实现的是客户简报表，我们的公司经理可以在快速浏览部分的顶部输入客户名称，然后在下面复制客户详情部分。理想情况下，我希望在他打字时将其复制出来。

我看了this discussion，不幸的是它没有帮助我。然后可能是因为我的Jquery脚本很差。

因此，在#client_name_output中实时复制的#client_name中的输入是我想要实现的：）

任何帮助将不胜感激！

<fieldset>
    <legend><span class="number">1</span>At A Glance</legend>
    <label for="name">Manager</label> 

    <select id="manager" name="manager">
        <optgroup id="OTA" label="OTA">
            <option id="vernon_penny">Vernon Penny</option>
            <option id="nick_heygate">Glenn Collie</option>
            <option id="nick_heygate">Nick Heygate</option>
        </optgroup>
    </select>

    <input type="text" id="client_name" name="client" placeholder="Client">
    <input type="text" id="project_name" name="project_name" placeholder="Project Name">
    <label for="date">Deadline</label>
    <input type="date" id="date" name="date">
</fieldset>

<fieldset>
    <legend><span class="number">2</span>Client Info</legend>
    <p id="client_name_output"></p>
    <input type="url" id="website" name="client_website" placeholder="Website">
    <textarea id="bio" name="client_bio" placeholder="bio"></textarea>
</fieldset>

    <button type="submit" class="large btn">Send</button>

Answer 1

我不太确定你想要什么。想法是，您需要捕获#client_name值，然后将其值分配到#client_name_output。试试这段代码，希望有所帮助：

$(document).ready(function(){
   $('#client_name').on('keyup',function(){
     var c_val = $(this).val();
     $('#client_name_output').text(c_val);
 });
});

Answer 2

您可以使用JQuery检查输入上是否有密钥。如果是这样，只需更新client_name_output。

$(document).ready(function() {
    $('#client_name').keyup(function () {
        $('#client_name_output').text($(this).val());
    });
});

document.ready确保你等到DOM被加载，然后才能在不存在的id上绑定一个函数。

确保您在html中引用了jquery代码。

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

Answer 3

$(function() {
  $('#client_name').on('keyup', function() {
    var text = $(this).val();
    $('#client_name_output').text(text);
  });
});

这将是最简单的方法。

https://jsfiddle.net/jsj7nh6f/2/

如何同时复制另一个字段中的表单字段文本输入

3 个答案: