Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

模拟HTML5中PlaceHolder的效果

  PlaceHolder原本的效果是很死的,而且只有HTML5可以用。现在我们要做全兼容,而且还有实现在他之上的效果,因此我们需要自己构造HTML。
  首先我们需要一个输入框,和一个用来放置提示文字的元素。还需要一个容器把他们装起来,这样操作会容易一些。最后给容器加了id,以便程序和CSS选择器定位。当然如果有很多个输入框都需要实现这个效果,那就做个循环。容器就别用id,而改用class。这里我们只实现一个而已,所以用id。 <!DOCTYPE html>
<div id="panel">
  <input />
  <span>请输入文字</span>
</div>
  这就是HTML了,这就是这个骨架部分。光有骨架毕竟太难看了,接下来我们要给它装饰下,给它添加CSS。这里应该给容器使用相对定位,让后内部的元素使用绝对定位,这样才能保证提示文字在文本框之上,看起来就好像在文本框里面一样。SPAN标签最好放在INPUT的后面,因为绝对定位的元素后面的才能挡住前面的,我们需要的效果是提示文字挡住输入框。当然调换位置也行,只不过那样就必须加上z-index属性了。还有SPAN应该设置成初始隐藏的,因为有时候INPUT会有初始值,要是网络卡点说不定就和提示文字重叠了。其它至于文本框大小边框颜色什么的就随便了,漂亮就行,我是天生审美缺陷的,所以就随便做一个样式吧。 #panel {position:relative;}
#panel * {
  position:absolute;
  font:14px/20px 微软雅黑;
  padding:2px 3px;
}
#panel span {
  height:20px;
  display:none;
  margin-left:1px;
}
#panel input {
  width:130px;height:20px;
  border:1px solid #CCC;
  outline:none;
}
  现在,这玩意儿就有了骨架和肉体,接着我们要给它注入灵魂,那就是编写程序。思路大概是这样的:当用户获取控件焦点时,把SPAN的颜色变浅。然后用一个setInterval持续判断文本框内容,一旦有文字出现就隐藏SPAN,如果没有就显示SPAN。文本框失去焦点的时候注销setInterval。接着看代码 (function(){
  //变量声明
  var panel,input,span,itv;
  //获取元素
  panel=document.getElementById("panel");
  input=panel.children[0];
  span=panel.children[1];
  //INPUT得到焦点事件
  input.onfocus=function(){
    //避免重复触发
    if(itv)return;
    //设置浅色
    span.style.color="#CCC";
    //创建计时器
    itv=setInterval(function(){
      //有文字则隐藏SPAN,没文字则显示SPAN
      span.style.display=input.value?"none":"block";
    },50);
  };
  //INPUT失去焦点事件
  input.onblur=function(){
    //注销计时器
    clearInterval(itv);
    itv=0;
    //如果文字存在则隐藏SPAN
    if(input.value)
      span.style.display="none";
    else//否则 设置深色并显示SPAN
      span.style.color="#999",
      span.style.display="block";
  };
  //别以为这样就完了!
  //因为SPAN默认是隐藏的,所以我们要判断并显示它
  //这和blur事件中做的行为一样的,所以我们触发一次blur
  //而blur方法需要已经存在焦点才会有效
  //所以我们不使用这个方法,而直接调用onblur
  input.onblur();
  //还没完,你会发现鼠标点击在SPAN上,INPUT无法获取焦点
  //所以我们要把SPAN的事件交给INPUT
  span.onclick=function(){
    input.focus();
  };
  //这样才算完~
})();
  这样算是完美实现了吧,文中使用的例子在这儿,可以点击查看。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^