How to make an input text box change length according to its content

How to make an input text box change length according to its content
First:

Copy code
The code is as follows:

<input type="text" onkeydown="this.onkeyup();" onkeyup="this.size=(this.value.length>4?this.value.length:4);" size="4">

Among them, size="4" defines the initial size. If it is not defined here, change the 4 in this.size=(this.value.length>4?this.value.length:4); to 20. The default size of <input type="text"> is 20.

second:
If you define the width attribute in style, and want its width to change according to the content, aren't the two requirements contradictory? So here you can't define the width attribute in style.

<<:  SQL implementation of LeetCode (181. Employees earn more than managers)

>>:  Vue+SSM realizes the preview effect of picture upload

Recommend

Detailed explanation of jQuery chain calls

Table of contents Chain calls A small case Chain ...

How to deploy Confluence and jira-software in Docker

version: centos==7.2 jdk==1.8 confluence==6.15.4 ...

We're driving IE6 to extinction on our own

In fact, we wonder every day when IE6 will really...

Using react-beautiful-dnd to implement drag and drop between lists

Table of contents Why choose react-beautiful-dnd ...

js implements mouse in and out card switching content

This article shares the specific code of js to re...

W3C Tutorial (4): W3C XHTML Activities

HTML is a hybrid language used for publishing on ...

Detailed discussion of InnoDB locks (record, gap, Next-Key lock)

Record lock locks a single index record. Record l...

Samba server configuration under Centos7 (actual combat)

Samba Overview Samba is a free software that impl...

MySQL paging performance exploration

Several common paging methods: 1. Escalator metho...

Vue uses WebSocket to simulate the chat function

The effect shows that two browsers simulate each ...

MySQL aggregate function sorting

Table of contents MySQL result sorting - Aggregat...