文本框水印提示效果的简单实现代码


Posted in Javascript onFebruary 22, 2014
<!doctype html>
<html>
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
        #divTips{
            filter:alpha(opacity=30); /*IE滤镜,透明度50%*/
            -moz-opacity:0.3; /*Firefox私有,透明度50%*/
            opacity:0.3;/*其他,透明度50%*/
            position: absolute;width: 600px; height: 400px;display:none;color:red;z-index:10;padding:10px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            var $txtNote = $("#txtNote");
            var $divTips = $("#divTips");
            $txtNote.focus(function () {
                //置焦点时隐藏
                $divTips.hide();
            }).blur(function () {
                //离开时, 如果为空则显示,否则隐藏. 然后定位
                $divTips.toggle($txtNote.val() == "")
                    .css({
                        "left": $txtNote.position().left,
                        "top" : $txtNote.position().top
                    });
            });
            $divTips.click(function () {
                $txtNote.focus();
            });
            $txtNote.blur();
        });
    </script>
</head>
<body>
    留言板<br />
    <textarea id="txtNote" style="width: 600px; height: 400px;"></textarea>
    <div id="divTips">
        亲,欢迎访问,有什么说的就写下来吧!!<br />
        (在下面的框框中留下您的name, 方便的话请留下您的联系方式)
    </div><br />
    <input type="text" value="姓名" /> <input type="text" value="手机/QQ/……" />
</body>
</html>
Javascript 相关文章推荐
Mootools 1.2教程(21)——类(二)
Sep 15 Javascript
基于JQuery的6个Tab选项卡插件
Sep 03 Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 Javascript
jquery获得当前html页面源码的方法
Jul 14 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
javascript观察者模式实现自动刷新效果
Sep 05 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 Javascript
vue中jsonp插件的使用方法示例
Sep 10 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 #Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 #Javascript
jquery取消选择select下拉框示例代码
Feb 22 #Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 #Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 #Javascript
js document.write()使用介绍
Feb 21 #Javascript
jQuery写fadeTo示例代码
Feb 21 #Javascript
You might like
投票管理程序
2006/10/09 PHP
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
js仿京东放大镜效果
2020/08/09 Javascript
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
python的re模块应用实例
2014/09/26 Python
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
python中map的基本用法示例
2018/09/10 Python
python游戏地图最短路径求解
2019/01/16 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
详解python polyscope库的安装和例程
2020/11/13 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
小学语文教学反思
2014/02/10 职场文书
知识竞赛主持词
2014/03/26 职场文书
公司外出活动方案
2014/08/14 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
领导干部考核评语
2015/01/04 职场文书
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫