input和textarea提示文字效果

有时候在网站的登陆和注册页面的时候，常常会看到输入框里面会有提示文字，当离开时候，默认的提示文字又会消失，这种效果如何实现，好奇的人们要看这里！！！

名词解释：

焦点事件：能够使浏览器区分用户输入的对象，当一个元素有焦点的时候，那么他就可以接收用户的输入。

当然，不是所有的元素都能接受焦点，他的要求是响应用户操作的元素才有焦点。

比如input,下拉列表等，这些都是在和用户进行交互。

input：表单标签默认的属性是文本输入框。
textarea：表单标签文本域，常见的应用是用户留言框。
placeholder：h5新增属性，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点

（或输入内容）时，提示文字消失。

以下以（input/textarea举例）

(input使用这种方法的代码与textarea同理)

一、textareainput实现简单版输入数据默认文本消失

(但是，这种只能实现当用户输入数据的时候，默认字体消失，无法完成当鼠标离开的时候，默认文本在恢复回来。)

textarea实现方法

(html部分):

<textarea id="text1">你可以在这里说点什么哦!</textarea>

(css部分)：

#text1{
        width: 200px;
        height: 300px;
        resize:none;
        outline: none;
}

(js部分)：


window.onload=function(){
    var text1=document.getElementById('text1')    ;
    text1.onclick=function(){
    if(this.value=="你可以在这里说点什么哦！") {
        this.value="";
    }else if(this.value==""){
        this.value="你可以在这里说点什么哦！";
        }
    }
}

分析：

css样式中，大小固定，将它的resize设置为none，说明禁止用户进行缩放。
利用js对他的value值进行判断即可。

二、input实现升级版默认文本消失再自动出现

(html部分):

<p id="p1">登陆邮箱</p>
<input type="text" value="请输入" id="text1">

(css部分)：

#p1{
        color: skyblue;
        font-size: 20px;
}#text1{
        width: 200px;
        height: 30px;
        box-sizing:border-box;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        -o-box-sizing:border-box;
        -ms-box-sizing:border-box;
        outline: none;
}

(js部分)：


window.onload=function(){
    var text1=document.getElementById('text1');
    text1.onfocus=function(){
    if(this.value=="请输入"){
        this.value="";}}
    text1.onblur=function(){
    if(this.value==""){
        this.value="请输入";
        }
    }
}

分析：

input标签自带默认属性border和padding共计6px的值，用css3的box-sizing

可以清楚默认样式，但是具有兼容性，所以添加前缀。border-box属性是指border和padding

计入width之内。这样input的宽高就没有误差了。
outline为none就是去掉他的蓝色框默认属性。
这里用获取焦点onfocs和失去焦点onblur事件来对此进行判断。

三、input实现完美版默认文本消失再自动出现

这个H5新属性placeholder与type的区别在于，【鼠标点击输入】后，默认文本才会消失。

而type里的value值是当【鼠标点击】时，默认文本就会消失。

(html部分):

<p id="p1">登陆邮箱</p>
<input placeholder="这是H5新标签"id="text1">

(css部分)：

#p1{
        color: pink;
        font-size: 20px;
}#text1{
        width: 200px;
        height: 30px;
        box-sizing:border-box;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        -o-box-sizing:border-box;
        -ms-box-sizing:border-box;
        outline: none;
}

(js部分)：


window.onload=function(){
    var text1=document.getElementById('text1');
    text1.onfocus=function(){
    if(this.value=="请输入"){
        this.value="";}}
    text1.onblur=function(){
    if(this.value==""){
        this.value="请输入";
        }
    }
}

<input placeholder=”这是H5新标签”id=”text1”>

<input type=”text” value=”请输入” id=”text1”>

二者几乎在使用上等同。

但是input标签palceholder这个属性用户的体验性能更好一些！

由于placeholder是html5的新属性，可想而知，仅支持html5的浏览器才支持placeholder，

目前最新的firefox、chrome、safari以及ie10都支持，ie6到ie9都不支持。