编程 Javascript

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

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