您的位置:首页 > Web前端 > JQuery

jQuery实现文本域提示文字点击后消失

2015-09-07 21:15 816 查看
使用jQuery实现文本域内提示文字,当鼠标点击进文本域后自动消失,文本域失去鼠标焦点后显示提示文字或显示用户输入的文字。

实现思路很简单,只需监听文本域的鼠标点击进入和失去鼠标焦点事件即可。

<textarea id="myinput"></textarea>
$(function(){
var t = $('#myinput'); //获取到文本域对象
t.css("color","#A9A9A9"); //设置文本域的样式
t.val("请输入内容"); //设置默认显示文字
var default_value = t.val(); //把默认显示的文字赋给一个变量

t.focus(function() { //当鼠标点击文本域时修改文本域的样式,判断文本域内的文字是否等于默认值,如果等于就把文本域内设空
t.css("color","black");
if (t.val() == default_value) {
t.val('');
}
});

t.blur(function() { //当文本域失去鼠标焦点时判断文本域中的值是否为空,如果为空就把文本域的值设置为默认显示的文字并修改样式
t.css("color","black");
if (t.val() == '') {
t.val(default_value);
t.css("color","#A9A9A9");
}
});

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jQuery