Javascript: Edit a preview with jquery

问题

I have 2 divs, the first one has the label with the content to show, but when you click the "edit" button, it should show you the div="edit" and the content of the 1st label inside of the input that is linked to it (same id).

By the other way, I saw sites that when you type something inside that input, the original label of the "preview" div is getting updated in realtime.

Could someone help me with the script? Thank you!

<html>
        <body>
                <div id="preview">
                        <label id="companyName" class="workExperience">
                                This is my company
                        </label>
                        <label id="companyCountry" class="workExperience">
                                This is my company Country
                        </label>
                        <input type="button" value="edit"/>
                </div>
                <div id="edit">
                        <label>Company Name: </label>
                        <input type="text" id="companyName" />
                        <label>Company Country: </label>
                        <input type="text" id="companyCountry" />
                </div>
        </body>
</html>

回答1:

You can use something like below. Notice though that I changed the id of the fields to be different. It is not a good practice to give multiple controls on the same page the same id. Some browsers do not work with this and it really doesn't make sense anyways.

$(document).ready(
    function()
    {
       $("#companyNameText").keypress(
           function()
           {
               $("#companyNameLabel").html(this.value);
           });

       $("#companyCountryText").keypress(
           function()
           {
               $("#companyCountryLabel").html(this.value);
           });
    });

来源：https://stackoverflow.com/questions/3461876/javascript-edit-a-preview-with-jquery

标签

javascript

jquery

input

label