Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use div to imitate the input effect, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

Realize the effect

Here we define a div that displays the content to simulate input, and the css style is as follows.

Css style

We use the: before pseudo element to load the input, and the content attribute in the: before element to dynamically change the attribute value of the element.

Use: before pseudo element

In the input tag, if the input element gains focus, there will be a cursor flashing inside the input element, this effect can be achieved by: after pseudo-element.

We will use the knowledge of animation animation, first define an animation effect, and use the opacity attribute to control whether or not to display, resulting in a flicker effect.

Define flicker action

Then use it in the: after pseudo element.

: after pseudo element

After setting up the div effect, you need to display the value in the div when you click the number below, which needs to be controlled by Javascript.

First get all the elements of the action that exist on the page.

Get element

Then add corresponding events to the number and delete elements, respectively.

Element binding event

After the event is bound, the value is dynamically displayed in the div when the number is clicked, and the last added element value is deleted accordingly when deleted.

For the design of the whole page, the layout of header,div and footer is adopted.

The html part of the header and div code is as follows.

Header and div

The corresponding footer code is as follows, which mainly uses table layout, which is relatively simple and practical.

Thank you for reading this article carefully. I hope the article "how to use div to imitate input effect" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.