轩枫阁

首页 / Web前端 / 授人以渔 / Javascript / 类似表单提示-placeholder的实现方法

类似表单提示-placeholder的实现方法

表单提示就是在input输入框予以文字提示,当内容改变时提示文字消失的效果。实现方法有很多种,HTML5的placeholder也能方便的实现,下面简单介绍下

1.placeholder解决方案

百科:placeholder是html5中的表单占位符,支持text,password及textarea等html5中新增的表单元素。
效果:
方法:

2.placeholder兼容

既然是html5,那么当然只有高级浏览器可以支持了(所以使用低级浏览器的同学在上一个例子是看不到效果的),不过我们可以借用jquery来帮我们来解决这个兼容问题。

jQuery代码(记得先引入jQuery库),然后再引入placeholder.js(点击下载

关于placeholder文字的颜色

火狐和webkit内核浏览器可以直接通过css来控制,分别为:-moz-placeholder和::-webkit-input-placeholder,调用这个js后,会给不支持placeholder的加上placeholder这个class,所以整合起来是:

css代码

注:请注意不要把这两个样式写在一起,如果集体声明ie8,9将不能正确解析.placeholder的样式。

3.javascript解决方案

4.jQuery解决方案

 

443/470
445/470

相关阅读

文章评论

  • 厉害

  • [星星眼儿]

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子