推荐原创input和textarea默认文字点击消失,为空则恢复提示文字(兼容所有浏览器)

JavaScript1804浏览0条评论函数JavaScript

虽然在HTML5实现这功能很简单,一段代码<input placeholder="提示文字...">就搞定,但是老古董的浏览器还是有些麻烦,所以写了这个函数。

效果如下:


js函数:

/*
 * input和textarea默认文字点击消失,为空则再恢复称默认提示文字(兼容所有浏览器)
 * @param mixed var obj 输入框对象(必填)
 * @param mixed var tipcolor 提示文字颜色 (选填)
 * @return mixed 无返回值
 *
 * array('author'=>'H.W.H','email'=>'five5@vip.qq.com');
 */
function formTip(obj,tipcolor){
var tipcolor = arguments[1] ? tipcolor : '#ACA899';//默认提示文字颜色
var tipVal = obj.defaultValue;//提示文字就是默认的value值

obj.style.color = tipcolor;
obj.onfocus = function(){
    if (obj.value == tipVal){
    obj.value ='';
    obj.style.color = '';//小hack移除添加的提示颜色
        }
    }

obj.onblur = function(){
if (obj.value ==''){
    obj.value = tipVal;
    obj.style.color = tipcolor;
        }
    }

}


html代码:

<form id="myform" >
<input name="keyword" type="text" value="请输入关键字">
<textarea name="content">简单说收</textarea>
</form>


使用方法:

    //单个
    formTip(document.getElementsByName("keyword")[0]);

    //多个
    var tipsList = new Array('keyword','content');
    for (var v in tipsList){
    formTip( document.getElementById('myform').elements[tipsList[v]] );
    }

本文地址:http://wuheng.net/blog_77.html 转载请注明出处

分享到: