有没有办法添加一个用户可以动态重命名的具有默认值的输入字段？答案

【问题标题】：Is there a way to add an input field with a default value that a user can rename dynamically?有没有办法添加一个用户可以动态重命名的具有默认值的输入字段？
【发布时间】：2020-04-20 05:05:16
【问题描述】：

我正在寻找允许用户动态更改页面上文本的功能，但我没有找到与我正在寻找的内容相关的任何内容。

有人知道添加此功能的方法吗？是否有库或者我可以使用 Vue（这是我们项目的一部分）来做到这一点？

The final result I'm looking for

这个想法是允许用户通过按右侧的图标将“项目 1”重命名为他们选择的名称，然后将其保存，以便每次用户访问页面时都能看到新名称。

任何有关我如何获得此功能或构建此功能的帮助或见解将不胜感激。

【问题讨论】：

与更改任何其他输入字段的值有何不同？
AngularJS 在这些方面非常出色。
你能提供一些你试过的代码吗？在 Vue 或 Vanilla JS 中，这非常简单，但可以理解的是，我们在这里帮助您不要为您编写东西。
到目前为止，您收到的所有答案都假设您要更改用户正在访问的文档的标题（在用户访问该特定文档的时间段内）。我不相信这实际上是你想要做的，但不能真正说出来。请edit您的问题更清楚。请参阅How to Ask，了解有关什么是好问题的提示。

标签： javascript html css vue.js

【解决方案1】：

您可以通过两种方式做到这一点。第一个不需要任何库。第二个需要Angular.js。

<title></title>
<input onkeypress="document.getElementsByTagName('title')[0].innerHTML = this.value">

或

<title>{{input}}</title>
<input ng-model="input">

【讨论】：

OP 使用 vueJS 和 Angular
他说“有没有我可以使用的库或者Vue。”这意味着我们不仅限于 Vue.js
检查一下 或者我可以使用 Vue（这是我们项目的一部分）来做到这一点吗？
仅仅为了改变 HTML 页面的标题而引入对 Angular 的依赖（更不用说像 AngularJS 这样的旧库）是不值得的。
没错，这就是为什么我添加了使用纯JavaScript的方式。

【解决方案2】：

或者你可以用 vanilla JS 来做：

const el = document.getElementById('title');
el.onkeyup = function(e) {
   window.document.title = e.target.value;
}

New Page Title: &lt;input type="text" id="title"&gt;

【讨论】：

【解决方案3】：

<!DOCTYPE html>
<html>

<body>
    Title:
    <input id="userTitle" type="text" name="lname"></input>
    <button onclick="changeTitle()">Change Title</button>
    <script>
        function changeTitle() {
            document.title = document.getElementById('userTitle').value;
        }
    </script>
</body>

</html>

【讨论】：