前端技术二之类似twitter输入框提示特效

输入框提示在很多提示都要用到,比如搜索提示用户输入关键字,比如登录提示用户输入用户名和密码等等。比较常见的提示方式是通过onFocus和onBlur事件来监听Input的值来给出相应的提示,例:


我们再来看看twitter是怎么会理这个问题的!
首先来看三张图:
(1)点击前

(2)点击后

(3)键盘按下后

从上面的三张图片可以看出 当input获得焦点后提示文字成半透明状态,只要当输入文字以后提示语才渐渐消失。这种输入提示特效是不是很酷!下面来看看这个特效是怎么实现的!
看twitter的源代码
点击前和点击后:

Full name

输入文字后:

Full name

看完上面的代码是不是已经明白实现的原理了呢? 没错就是通过javascript和CSS来实现的, 首先用CSS将span.holder定位到input上面来,当鼠标点击(focus)input的时候span.holder的透明度()设为0.5 当输入文字(keydown)的时候span.holder透明度()设为0,input失焦(blur)的时候判断input的值是否为空。

.holding{position:relative; z-index:0;}
.holding .holder {
line-height: 28px;
position: absolute;
top: 0;
z-index: 1;
left: 8px;
white-space: nowrap;
cursor: text;
color: #999;
-webkit-transition: opacity .1s,font-size .1s;
-moz-transition: opacity .1s,font-size .1s;
-o-transition: opacity .1s,font-size .1s;
z-index:1;
}
.hasome input {
	color:#333;
}
.hasome .holder {
	opacity:0;
	filter:alpha(opacity=0);
	font-size:0!important;
}
$(document).ready(function() {
  $(".holding input").keydown(function() {
    $(this).parent().addClass("hasome")
  }),
  $(".holding input").blur(function() {
    $.trim(a(this).val()) == "" && $(this).parent().removeClass("hasome")
  }),
  $(".holding .holder").click(function() {
    $(this).prev().focus()
  })
})

现在你也可以拥有twitter输入框提示特效啦!

“前端技术二之类似twitter输入框提示特效”的3个回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注