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");
}
});
});
实现思路很简单,只需监听文本域的鼠标点击进入和失去鼠标焦点事件即可。
<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");
}
});
});
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法
- jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
- Jquery 表单取值赋值的一些基本操作
- jQuery实现复选框批量选择与反选的方法
- jQuery中的常用事件总结