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

下面的代码实现当用户停留在text输入框的时候提示输入什么的提示信息，提高用户粘合度。

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

图1

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

图2

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

图3

演示的源代码如下：

tt控件演示

//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=""+tipTxt+"";
}
function notTip(){
var dads = document.all.tipDiv.style;
dads.display="none";
}

【提示控件演示】

用户名：

密码：

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • JavaScript实现带自动提示的文本框效果代码

    示例一:直接编写AJAX 实现. 客户端: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Ajax实现自动提示的文本框</title> <st

  • JavaScript如何实现在文本框(密码框)输入提示语

    有时候我们需要在登陆表单有一些提示语言,比如"请输入用户名"和"请输入密码"等语言,至于用户名好说,但是在密码框中出现"请输入密码"这样的语言就有点麻烦了,因为在密码框输入的内容不会以明码显示.如果动态的控制type属性的话就有兼容性问题,如果input已经存在于页面中的话,在IE8和IE8以下浏览器中,type属性是只读的.所以就得想其他办法,代码如下: <!DOCTYPE html> <html> <head&g

  • 文本框输入时 实现自动提示（像百度、google一样）

    文本框输入时 实现自动提示（像百度、google一样）

    只要有三个文件: 一个js插件autocomplete.js和autocomplete.css两个文件,这是jquery官方网站提供的插件: 他们的下载地址:http://jqueryui.com/demos/autocomplete/ 一个是一般处理程序 : 一个是apsx页面,看下面的代码吧; 前台: 复制代码 代码如下: <script type="text/javascript"> $(document).ready(function() { ShowUserLis

  • 两种方法实现文本框输入内容提示消失

    第一种方法: 基于HTML5 input标签的新特性 - placeholder .另外,x-webkit-speech 属性可以实现语音输入功能. 复制代码 代码如下: <div><input type="email" name="email" spellcheck="false" placeholder="邮 箱" autofocus tabindex="1" x-webkit-spe

  • JavaScript 文本框下拉提示(自动提示)

    文本框下拉提示效果 html{overflow:-moz-scrollbars-vertical;} body{padding:0;margin:0;font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;} body,h1,p,blockquote,dl,dt,dd,ul,ol,li,input{margin:0;padding:0;} button,input,select,textarea {font:12px/1.5 tahoma,arial,si

  • asp.net 页面版文本框智能提示JSCode (升级版)

    原本准备在上一篇中直接修改的,无奈编辑功能太差,打开一堆html代码,空格"&nbsp"都看的人眼花缭乱,只好另开一篇. 升级说明:添加了针对一个界面多个职能提示位置的设定,只需修改文本框onfocus="fnStartInterval(this,'DropDownList2')", 设置好相应的参数即可,同时修复了在IE6下div无法遮盖下拉列表的问题,(IE6下无论如何设置select的z-index或div的z-index属性均无济于事),关于这个就是

  • 页面版文本框智能提示JS代码

    于是这code便诞生了,如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>无标题页</title> <script type="text/javascript" language="javascript"> var currentIndex=

  • Flex 文本框的输入下拉提示

    复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <mx:FormItem xmlns:mx="http://www.adobe.com/2006/mxml" label="" required="true" width="305" fontWeight="bold" height="28&

  • 基于JQuery实现鼠标点击文本框显示隐藏提示文本

    基于JQuery实现鼠标点击文本框显示隐藏提示文本

    比如本人网站的搜索框: 不使用的时候: 鼠标点击后: 用JQuery实现这个效果非常简单,下面是代码: 复制代码 代码如下: $(document).ready(function () { var searchBox = $("#ctl00_txtSearch"); searchBox.focus(function () { if (searchBox.val() == this.title) { // TextBox控件ToolTip属性转换为Html为title属性 searchB

  • 简单JS自动提示文本框代码

    简单JS自动提示文本框代码

    本例以颜色为例,为用户提供自动提示,展示效果和运行结果如图: 1.建立框架结构: 复制代码 代码如下: <body> <form method="post" name="myForm1"> Color: <input type="text" name="colors" id="colors" onkeyup="findColors();" /> <

随机推荐