How can I create an input field that comes with a preset value but can be updated by the user with a different name?

Question

How can I create an input field that comes with a preset value but can be updated by the user with a different name?

I am in need of a solution that will enable a user to update text on a webpage dynamically. I have been unable to find any information on how to achieve this.

Is there anyone aware of a method to implement this feature? Perhaps a library or utilizing Vue (which is part of our current project)?

The desired outcome I am aiming for

The concept is to empower the user to change 'Project 1' to a name of their choice by clicking the icon on the right, and then saving it so the new name persists each time the user revisits the page.

Any assistance or guidance on obtaining or creating this functionality would be greatly valued.

javascript html css vue.js

Answer 1

Answer №1

There are two ways to achieve this. The first method does not rely on any libraries, while the second method requires the use of Angular.js.

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

OR

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

Answer 2

There are two ways to achieve this. The first method does not rely on any libraries, while the second method requires the use of Angular.js.

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

OR

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

Answer 3

Answer №2

Alternatively, you have the option to accomplish this task using plain JavaScript:

const element = document.getElementById('page-title');
element.onkeyup = function(event) {
   window.document.title = event.target.value;
}

New Page Title: <input type="text" id="page-title">

Answer 4

Alternatively, you have the option to accomplish this task using plain JavaScript:

const element = document.getElementById('page-title');
element.onkeyup = function(event) {
   window.document.title = event.target.value;
}

New Page Title: <input type="text" id="page-title">

Answer 5

Answer №3

<!DOCTYPE html>
<html>

<body>
    Header:
    <input id="userHeader" type="text" name="lname"></input>
    <button onclick="modifyHeader()">Modify Header</button>
    <script>
        function modifyHeader() {
            document.title = document.getElementById('userHeader').value;
        }
    </script>
</body>

</html>

Answer 6

<!DOCTYPE html>
<html>

<body>
    Header:
    <input id="userHeader" type="text" name="lname"></input>
    <button onclick="modifyHeader()">Modify Header</button>
    <script>
        function modifyHeader() {
            document.title = document.getElementById('userHeader').value;
        }
    </script>
</body>

</html>

How can I create an input field that comes with a preset value but can be updated by the user with a different name?

Answer №1

Answer №2

Answer №3

Similar questions

How can I pass the current value of an HTML.DropDownListFor to an ActionLink?

Guide to setting up index.js with ApiProvider in the Redux Toolkit (RTK)

Express.js app does not seem to properly handle app.use(express.raw()) functionality

What is the best way to manage the back button using jQuery?

Issues with error handling in ExpressJS arise frequently

Desktop sharing in HTML5/H.264 format for optimal performance and compatibility across all

How can I use jQuery to target and modify multiple elements simultaneously

Have you considered utilizing "call for('express')()" instead?

How can we maintain line breaks in Textfields when using React-Admin and Material UI?

Obtaining a worldwide JavaScript variable through AJAX JSON query

Show information upon opening

What could be the reason for Safari generating larger videos than Chrome when utilizing the MediaDevices.getUserMedia() API?

What is the best way to reference class variables and methods within a callback function in Typescript?

Enhancing productivity with tools for developers and effortless tab navigation

Issue with Transition-group functionality

Manage the material-ui slider using play and pause buttons in a React JS application

A method for utilizing history.goBack in linked tabs while preventing the user from reverting to the previously selected tab

Dynamic insertion of the current page's id into href links

Using jQuery to add the name of a file to FormData and fetching it in a PHP script

Encountered a CastError in Mongoose when trying to cast the value "Object" to a string