input表單輸入框聚焦動畫系列

2021-10-06 04:29:00 字數 1831 閱讀 8208

inputbox class類用於布局,就是乙個input容器,便於**,我這裡設定每一行分為3個列(可根據自己需求設定)。

.inputbox

然後為input元素設定一些通用樣式。

input[type="text"]

:focus

effect-1 class類就代表這不同的input表單獲取焦點的動畫樣式種類, effect-1就代表第一種,以此類推。

.focus-border是輸入框聚焦後的邊框樣式。它採用絕對單位,位置在輸入框的左下角位置,高度為2畫素,開始時寬度被設定為0,不可見。並設定了0.4秒的過渡動畫效果。

當輸入框聚焦時以及在輸入框中有內容時,將.focus-border的寬度設定為100%。

搬你想搬,蓋你所需,碼字不易,且行且珍惜!

input表單輸入框聚焦動畫特效

class inputbox class effect 1 type text placeholder placeholder text class focus border i span div inputbox class類用於布局,就是乙個input容器,便於 我這裡設定每一行分為3個列 可根...

input 輸入框限制

只能輸入數字和乙個小數點 function clearnonum obj g,只保留第乙個.清除多餘的 obj.value obj.value.replace replace g,replace obj.value obj.value.replace d d 1 2.3 只能輸入6個小數 親測有用!...

分析 input表單輸入框預設提示資訊

我之前也做過,做法應該和大家都差不多,在輸入框裡寫入提示內容,當滑鼠獲取焦點後清空內容,當失去焦點後判斷內容是否為空,如果為空,則恢復顯示提示內容,反則不顯示。但這樣的做法是否合理?下面一一來做下分析。1 如果輸入內容和提示內容完全一樣,當失去焦點後,應該如何判斷?2 如果input在表單裡,提交表...