Chinaunix首页 | 论坛 | 博客
  • 博客访问: 845290
  • 博文数量: 372
  • 博客积分: 10063
  • 博客等级: 中将
  • 技术积分: 4220
  • 用 户 组: 普通用户
  • 注册时间: 2012-02-24 11:36
文章分类

全部博文(372)

文章存档

2012年(372)

分类: 虚拟化

2012-05-09 19:55:59

在WEB表单中,为了达到更好的用户体验,往往会在input输入框中添加文字或图形占位符。
以往占位符的实现方式都是通过javascript来判断value值的更改,现在html5提供了placeholder属性就可以在标准浏览器中轻松实现。
下面分别介绍本人常用的3种实现方法:

一、完全依靠javascript

就是通过onfocus,onblur的方式,动态改变其value值,但此种方式有几个缺点:
1.对于密码框,文字占位符无法实现(方式二可避免)
2.表单提交时,还需要对默认值进行单独处理,比较繁琐(方式二、三均可避免)
3.如果文本框中填入非占位符值的默认文本,需特殊处理,如搜索页面文本框中会填入当前的搜索关键字,这个值是不能被当做占位符处理的

function inputFocus(obj){ var b = obj.val(); obj.focus(function(){ if ($(this).val() == b) { $(this).val(''); } }).blur(function(){ if($(this).val().replace(/\s/g,"")==''||$(this).val()==b) { $(this).val(b); } }) };
二、使用label标签来模拟

这种方式比较符合标准,label具有了语义,而且避免了前一种方式的大部分缺点,推荐使用。具体的实现一般是通过绝对定位来将label和input进行重叠,然后配合javascript来调整label标签的显示和隐藏。

但是这里有个问题:当浏览器有自动填充表单功能时,input就会和label上的文字重叠,很难看,这种情况很难处理,即使使用onpropertychange/oninput 也达不到最佳的效果。这里介绍一个技巧:就是使用z-index让input处于label标签的上方,这样当浏览器自动填充时,input就会带有黄色的背景,挡住下方label的文字。

二、使用html5的placeholder属性

这个属性很好用,不再依赖js来完成,浏览器原生支持的当然更爽,可惜这个属性只在标准浏览器中支持,ie不支持。placeholder在各浏览 器中的表现也不一样,普通的css无法更改其默认样式,这是因为浏览器使用了优先级更高的伪类重置了样式,我们只需要在css中重写改伪类即可。如 firefox:input:-moz-placeholder{color:#999}。

 

上述3中方法没有最优的,只有最合适的,根据实际情况来进行取舍。当然可能还有其他更好的实现方式,欢迎讨论。

阅读(1923) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~