Javascript：使用jquery编辑预览_Javascript_Jquery_Input_Label

Javascript：使用jquery编辑预览

javascript jquery input

Javascript：使用jquery编辑预览,javascript,jquery,input,label,Javascript,Jquery,Input,Label,我有两个div，第一个具有要显示的内容的标签，但是当您单击“编辑”按钮时，它应该会显示div=“edit”以及链接到它的输入中的第一个标签的内容（相同id）另一方面，我看到一些网站，当你在输入中输入一些东西时，“preview”div的原始标签会实时更新有人能帮我写剧本吗？谢谢大家! <html> <body> <div id="preview"> <la

我有两个div，第一个具有要显示的内容的标签，但是当您单击“编辑”按钮时，它应该会显示div=“edit”以及链接到它的输入中的第一个标签的内容（相同id）

另一方面，我看到一些网站，当你在输入中输入一些东西时，“preview”div的原始标签会实时更新

有人能帮我写剧本吗？谢谢大家!

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


这是我的公司
这是我的公司所在的国家
公司名称：
公司所在国：

您可以使用下面的方法。请注意，我将字段的id更改为不同的。在同一个页面上为多个控件提供相同的id不是一个好的做法。有些浏览器不支持这种做法，而且这种做法毫无意义

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

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

它可以工作，但它会剪切我为什么键入的最后一个字符，除非我在后面添加另一个字符，否则它不会显示。将

keypress

更改为

keyup

。