Make HTML text input field grow as I type in JavaScript?

Web Development Javascript Object Oriented Programming

For this, use <span>. Since you want to type in it, do not forget to set <span> as −

contenteditable="true"

Example

Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
<style>
   span{
      border: solid 2px skyblue;
   }
   div{
      max-width: 500px;
   }
</style>
</head>
<body>
<div>
<span contenteditable="true">John Smith</span>
</div>
<script>
</script>
</body>
</html>

To run the above program, save the file name “anyName.html(index.html)” and right click on the file. Select the option “Open with Live Server” in VS Code editor.

Output

This will produce the following output −

AmitDiwan

Published on 12-Sep-2020 07:50:02

Previous Page Print Page