您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
文本框水印提示效果的简单实现代码
作者：佚名 责任编辑：admin 更新时间：2022-06-22
本篇文章主要是对文本框水印提示效果的简单实现代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
代码如下: <!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>- 上一个程序编程： js获得页面的高度和宽度的方法
- 下一个程序编程： js 金额格式化来回转换示例
