Computer >> Computer tutorials >  >> Programming >> Javascript

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


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

contenteditable="true"

Example

<!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 −

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