Javascript：使用 jquery 编辑预览答案

【问题标题】：Javascript: Edit a preview with jqueryJavascript：使用 jquery 编辑预览
【发布时间】：2010-08-11 19:06:20
【问题描述】：

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

另一方面，我看到一些网站，当您在该输入中键入内容时，“预览”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>

【问题讨论】：

标签： javascript jquery input label

【解决方案1】：

您可以使用如下所示的内容。请注意，我将字段的 id 更改为不同的。为同一页面上的多个控件提供相同的 id 不是一个好习惯。有些浏览器不支持这个，而且它真的没有意义。

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

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

【讨论】：

它可以工作，但它会剪切我输入的最后一个字符，除非我在其后面添加另一个字符，否则它不会显示它。
将keypress 更改为keyup。