技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> Inline Form Labels(2)

Inline Form Labels(2)

浏览:1899次  出处信息

很多网站在填写表单的时候,都可以看到这样一种UI,input[type=text]里面有提示的文字,当鼠标点进去之后提示文字就消失了。关于这种UI,之前有写过文章介绍过http://www.zhoumingzhi.com/?p=182。在本文中主要是介绍以HTML 5的实现方式以及兼容方案。

一,HTML 5的实现方式

HTML 5的input元素引入了placeholder的属性,就是为了实现本文开头所说的效果,代码也很简单。

以下是代码片段:

<input type="text" placeholder="请输入一些文字" />

二,对不支持HTML 5浏览器的兼容方案

对于不支持HTML 5的浏览器,上面的方法就不可行了。但是placeholder这个属性可以利用起来,结合JS实现想达到的效果。下面结合代码说明实现方法:

首先要用JS检测一下浏览器支不支持placeholder这个属性。

以下是代码片段:
(function() {
 var tmp = document.createElement("input");
 window.supports = {
  // 检测input是否支持placeholder特性
  placeholder: "placeholder" in tmp
 }
})();

如果支持的话就什么也不做,浏览器会帮你实现这个效果。

如果不支持则要写段JS。为了方便说明用到了jQuery,代码如下:

以下是代码片段:
// 绑定input的placeholder
function bindPlaceholder(input) {
 if(!window.supports.placeholder) {
  var jqInput = $(input),
   placeholder = jqInput.attr("placeholder");
  if(placeholder) {
   if(input.value == "") {
    input.value = placeholder;
    $(input).addClass("placeholder");
   }
   jqInput.focus(function() {
    if(this.value == placeholder) {
     $(this).removeClass("placeholder");
     this.value = "";
    }
   }).blur(function() {
    if(this.value == "") {
     $(this).addClass("placeholder");
     this.value = placeholder;
    }
   });
  }
 }
}

上述代码中有个叫placeholder的CSS类,这个主要是让占位符的字体颜色变灰。CSS如下:

以下是代码片段:
.placeholder {
 color: #a9a9a9;
}

实现上面的函数之后,就可以在页面初始化的时候调用了。

以下是代码片段:
$("input[placeholder]").each(function() {
 bindPlaceholder(this);
});

三,结论

HTML 5中有很多很方便的特性,但是目前不是所有浏览器都支持,所以在用HTML 5的时候要考虑到兼容方案。

建议继续学习:

  1. HTML5 离线缓存-manifest简介    (阅读:16110)
  2. 面向移动设备的HTML5开发框架梳理    (阅读:5931)
  3. JavaScript,只有你想不到    (阅读:5108)
  4. HTML5本地存储初探(二)    (阅读:4398)
  5. Phonegap + HTML5 开发经验小结    (阅读:4110)
  6. HTML5是什么东东 我们为什么要关注    (阅读:3850)
  7. HTML5文件API之图片预览    (阅读:3680)
  8. HTML6 初探 — 你没看错,是6不是5    (阅读:3653)
  9. 让你的网站也像Gmail一样支持文件拖放上传-HTML5之File API    (阅读:3455)
  10. HTML5技术的调研以及贴吧应用总结    (阅读:3471)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1