javascript 输入文本框时的友好提示- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 输入文本框时的友好提示

Javascript: QQ邮箱的一个文本编辑器代码; Z-Blog中用到的js代码; 绝对经典的滑轮新闻显示(javascript+css)实现; 用js实现的仿sohu博客更换页面风格（简单版）; 仿Vista进程条效果; 用Javascript判断图片是否存在，不存在则显示默认图片的代码; 用JQuery 实现的自定义对话框; jQuery使用手册之三 CSS操作; 利用Dojo和JSON建立无限级AJAX动态加载的功能模块树; 贴图转换+转贴工具用到的js代码超级推荐; 超级简单的图片防盗(HTML),好用; 现代 javscript 编程资料; 超级可爱纯js网页时钟; Dojo之路:如何利用Dojo实现Drag and Drop效果; AJAX架构之Dojo篇; 发两个小东西，ASP/PHP 学习工具。用JavaScript写的; 使用prototype.js 的时候应该特别注意的几个问题.; 一个已封装好的漂亮进度条; 漂亮的widgets，支持换肤和后期开发新皮肤; 用javascript实现的仿Flash广告图片轮换效果

No. « ‹ 203 204 205 206 › »

技术文章搜索

关键字

Javascript 中的 javascript 输入文本框时的友好提示

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 254 ::

收藏到网摘: n/a

勾选时激活input 否则禁用的javascript代码 jValidate 基于jQuery的表单验证插件

在输入文本框内容时，有时候需要提示用户输入的内容，为了更友好的提示用户，我用js写了一种方法，当点击文本框时，在文本框右边提示用户要输入的信息。下面的代码实现当用户停留在text输入框的时候提示输入什么的提示信息，提高用户粘合度。

在输入内容前，显示如图1所示

图1

当用户名的文本框或得焦点时，效果如图2所示

图2

当密码文本框或得焦点时，效果如图3所示

图3

演示的源代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>tt控件演示</title>
<script language="javascript" >
//tipTxt要显示的内容，apos向右移动的距离，vpos向下移动的距离
function tip(tt,tipTxt,apos,vpos){
if(apos==undefined){
var apos=0;
}
if(vpos==undefined){
var vpos=0;
}
var dads = document.all.tipDiv.style;
dads.display="block";
var th = tt;
var ttop = tt.offsetTop-tt.clientHeight+vpos; //TT控件的定位点高
var thei = 20; //TT控件本身的高
var tleft = tt.offsetLeft;
var tleft = tt.offsetLeft+tt.offsetWidth+apos;
var twidth=100;
var ttyp = tt.type;
while (tt = tt.offsetParent){
ttop+=tt.offsetTop;
tleft+=tt.offsetLeft;
}
dads.top = ttop+thei+6;
dads.left = tleft;
dads.width =twidth;
document.all.taemTip.innerHTML="<font color='red'>"+tipTxt+"</font>";
}
function notTip(){
var dads = document.all.tipDiv.style;
dads.display="none";
}
</script>
</head>
<body>
<form action="" method="get">
<blockquote>
<blockquote>
<p align="center"> 【提示控件演示】
用户名：
<input name="dd" onBlur="notTip()" type="text" onfocus="tip(this,'可输入用户名或邮箱')"/><br>
密码： <input name="dd" onBlur="notTip()" type="text" onfocus="tip(this,'请输入密码')"/>
<br>
</blockquote>
</blockquote>
</form>
<div id='tipDiv' style='position:absolute;z-index:1000;display:none;width:50;heiht:40'>
<table width="100%" border="0" cellpadding="4" cellspacing="1">
<tr >
<td width="100%" height="25" ><div id="taemTip" style="background:#CFC"></div></td>
</tr>
</table>
</div>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

勾选时激活input 否则禁用的javascript代码 jValidate 基于jQuery的表单验证插件

Javascript 中的 javascript 输入文本框时的友好提示

评论 (0) All