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

Question

本质上，我在这里想要实现的是一个客户简要表，我们的公司经理可以在快速浏览部分的顶部输入客户名称，然后将其复制到下面的客户详细信息部分下。理想情况下，我希望它能在他打字时将其复制出来。

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

因此，#client_name 中的输入实时复制到#client_name_output 中是我想要实现的目标:)

任何帮助将不胜感激!

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