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


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 相关文章推荐
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
基于jquery的direction图片渐变动画效果
May 24 Javascript
使用javascript获取flash加载的百分比的实现代码
May 25 Javascript
图片无缝滚动代码(向左/向下/向上)
Apr 10 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
Javascript之String对象详解
Jun 08 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
vue无限轮播插件代码实例
May 10 Javascript
javascript canvas API内容整理
Feb 16 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 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 分页函数multi() discuz
2009/06/21 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
jquery.validate使用攻略 第一部
2010/07/01 Javascript
js 编程笔记 无名函数
2011/06/28 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
Python实现远程调用MetaSploit的方法
2014/08/22 Python
Python中偏函数用法示例
2018/06/07 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
Python变量访问权限控制详解
2019/06/29 Python
简单了解python协程的相关知识
2019/08/31 Python
django 简单实现登录验证给你
2019/11/06 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
python实现在线翻译功能
2020/03/03 Python
浅谈django channels 路由误导
2020/05/28 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
上海方立数码笔试题
2013/10/18 面试题
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
自荐信的禁忌和要点
2013/10/15 职场文书
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android