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


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 相关文章推荐
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
javascript二维数组转置实例
Jan 22 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
javascript遍历对象的五种方式实例代码
Oct 24 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
php面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
PHP simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
如何使用PHP实现javascript的escape和unescape函数
2013/06/29 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
PHP数组函数知识汇总
2016/05/12 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
推荐20家国外的脚本下载网站
2011/04/28 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
js数组的操作指南
2014/12/28 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
jQuery 移除事件的方法
2020/06/20 jQuery
javascript canvas时钟模拟器
2020/07/13 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
python 写的一个爬虫程序源码
2016/02/28 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
同程旅游英文网站:LY.com
2018/11/13 全球购物
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
高中毕业自我鉴定
2013/12/13 职场文书
个人违纪检讨书
2014/09/15 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
四风自我剖析材料
2014/09/30 职场文书
通讯稿格式及范文
2015/07/22 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript