Javascript:使用 jquery 编辑预览

标签 javascript jquery input label

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

最佳答案

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

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

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

关于Javascript:使用 jquery 编辑预览,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3461876/

相关文章:

javascript - setInterval 和 Ajax

javascript - 使用 JQuery 从表单中添加/删除选项卡式数据

javascript - 如果使用 Javascript 选择复选框,如何要求输入字段?

javascript - Angular 中嵌套订阅的错误

javascript - 在完成 javascript css 后重复动画

javascript - 为什么 Immutable.js 在 Map.setIn() 上抛出无效的键路径

javascript - 如何在 javascript 中删除带有 spread 和 rest 的嵌套属性

javascript - 连接选择标签

C++。我试图通过在开关中使用数组来获取用户输入,但是当我运行代码时它显示段错误?

javascript - React JSX 将最小日期时间添加到 datetime-local 输入