html ip输入框效果,html5 input文本框输入动画特效
特效描述：文本框輸入動畫 動畫特效。幾個更鼓舞人心的風(fēng)格為文本框輸入動畫包括一些新技術(shù)和新思想。
代碼結(jié)構(gòu)
1. 引入CSS
2. 引入JS
3. HTML代碼
Manami
Username
Website
Invitation Code
Nariko
Username
Website
Invitation Code
Nao
Username
Invitation Code
Yoshiko
Bird's Color
Wing Span
Beak Length
Shoko
Player Name
Village
World
Chisato
First Name
Middle Name
Last Name
Makiko
Search
Sae
Email Address
Invitation Code
Full Name
Kozakura
Name
Website
Fumi
Course Name
Degree
Work Place
Ruri
Username
Website
Invitation Code
Kohana
Time
Line
Phone
(function() {
// trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
if (!String.prototype.trim) {
(function() {
// Make sure we trim BOM and NBSP
var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
String.prototype.trim = function() {
return this.replace(rtrim, '');
};
})();
}
[].slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) {
// in case the input is already filled..
if( inputEl.value.trim() !== '' ) {
classie.add( inputEl.parentNode, 'input--filled' );
}
// events:
inputEl.addEventListener( 'focus', onInputFocus );
inputEl.addEventListener( 'blur', onInputBlur );
} );
function onInputFocus( ev ) {
classie.add( ev.target.parentNode, 'input--filled' );
}
function onInputBlur( ev ) {
if( ev.target.value.trim() === '' ) {
classie.remove( ev.target.parentNode, 'input--filled' );
}
}
})();
總結(jié)
以上是生活随笔為你收集整理的html ip输入框效果,html5 input文本框输入动画特效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 不去银行怎么改手机号
- 下一篇： html给网页加图片背景颜色,0035