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


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 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
Javascript学习指南
Dec 01 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
Vue代码分割懒加载的实现方法
Nov 23 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 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
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
php中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
php使用GeoIP库实例
2014/06/27 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
javascript编码的几个方法详细介绍
2013/01/06 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
详解Python如何获取列表(List)的中位数
2016/08/12 Python
python实现BackPropagation算法
2017/12/14 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
基于Tensorflow批量数据的输入实现方式
2020/02/05 Python
python用什么编辑器进行项目开发
2020/06/17 Python
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
工程监理应届生求职信
2013/11/09 职场文书
公务员培训心得体会
2013/12/28 职场文书
上课打牌的检讨书
2014/02/15 职场文书
个人银行贷款担保书
2014/04/01 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python
python开发人人对战的五子棋小游戏
2022/05/02 Python