怎么使用div模仿input效果

這篇文章主要介紹了怎么使用div模仿input效果，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

實(shí)現(xiàn)效果

這里我們定義一個(gè)顯示內(nèi)容的div來模擬input，其css樣式如下。

css樣式

我們使用:before偽元素來裝載輸入的內(nèi)容，在:before元素中使用content屬性來動(dòng)態(tài)的元素的屬性值。

使用:before偽元素

在input標(biāo)簽中，如果input元素獲取焦點(diǎn)后，在input元素內(nèi)會(huì)有光標(biāo)在閃爍，這個(gè)效果我們可以通過:after偽元素來實(shí)現(xiàn)。

我們會(huì)用到動(dòng)畫animation的知識(shí)，首先定義一個(gè)動(dòng)畫效果，利用opacity屬性來控制顯示與不顯示，從而造成閃爍效果。

定義閃爍動(dòng)作

然后在:after偽元素中使用。

:after偽元素

在設(shè)置好div效果后，需要在點(diǎn)擊下面的數(shù)字時(shí)，將值顯示在div中，這就需要用到Javascript去控制。

首先獲取頁面上所有存在動(dòng)作的元素。

獲取元素

然后給數(shù)字和刪除元素分別添加對(duì)應(yīng)的事件。

元素綁定事件

綁定事件后，在點(diǎn)擊數(shù)字時(shí)會(huì)將值動(dòng)態(tài)的顯示在div中，在刪除時(shí)也會(huì)相應(yīng)刪掉最后一個(gè)添加的元素值。

對(duì)于整個(gè)頁面的設(shè)計(jì)，采用了header，div和footer的布局。

header和div的html部分代碼如下。

header與div

相應(yīng)的footer部分代碼如下，其主要采用的是table布局，相對(duì)簡單實(shí)用。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“怎么使用div模仿input效果”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!