html文本框提示效果的示例代码

完整代码如下：

代码如下:

<!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" xml:lang="en" lang="en">
<head>
  <title>html文本框提示效果</title>
  <style type="text/css">
  *{
  margin:0px;padding:0px;font-size:12px;
  }
    input{
      width:100px;height:20px;border:1px solid #ccc;
    }
  </style>
</head>
<body>
<script language="javascript">
function tips(id,str){
var l=document.getElementById(id).offsetLeft+120;
var t=document.getElementById(id).offsetTop;
document.getElementById("tips").innerHTML="提示："+str;
document.getElementById("tips").style.left=l+"px";
document.getElementById("tips").style.top=t+"px";
document.getElementById("tips").style.display="";
}
function outtips(){
    document.getElementById("tips").style.display='none';
}
</script>
<div id="tips" style="position:absolute;border:1px solid #ccc;padding:0px 3px;color:#f00;display:none;height:20px;line-height:20px;background:#fcfcfc"></div>
<br />
姓名：<input type="text" id="username" onfocus="tips('username','姓名长度最多16个字符')" onblur="outtips()" />
<br />
密码：<input type="password" id="password" onfocus="tips('password','密码长度必须在3-18位之间')" onblur="outtips()" />
</body>
</html>

赞 (0)

相关推荐

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

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

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

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

    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==undef

  • 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

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

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

  • 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

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

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

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

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

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

  • html文本框提示效果的示例代码

    完整代码如下: 复制代码 代码如下: <!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" xml:lang="en" lang=&quo

  • WPF实现文本描边+外发光效果的示例代码

    WPF实现文本描边+外发光效果的示例代码

    解决思路: (1)描边效果可以将文本字符串用GDI+生成Bitmap,然后转成BitmapImage,再用WPF的Image控件显示. (2)外发光效果用WPF自带的Effect实现 代码: using System; using System.Drawing; using System.Drawing.Drawing2D; using System.Drawing.Text; using System.IO; namespace TextHighLighthDemo { public clas

  • jQuery实现动态表单验证时文本框抖动效果完整实例

    jQuery实现动态表单验证时文本框抖动效果完整实例

    本文实例讲述了jQuery实现动态表单验证时文本框抖动效果.分享给大家供大家参考.具体如下: 这里使用jQuery实现的动态表单验证特效,当用户输入错误或没有输入的时候点击提交按钮,有问题的输入框会抖动几下,以提示用户此项有问题,文本框抖动功能都有意思,这个表单比较典型,想实现jquery Ajax表单功能的可以参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-table-txt-check-shake-style-codes

  • Android Flutter实现点赞效果的示例代码

    Android Flutter实现点赞效果的示例代码

    目录 前言 绘制小手 完整源码 前言 点赞这个动作不得不说在社交.短视频等App中实在是太常见了,当用户手指按下去的那一刻,给用户一个好的反馈效果也是非常重要的,这样用户点起赞来才会有一种强烈的我点了赞的效果,那么今天我们就用Flutter实现一个掘金App上的点赞效果. 首先我们看下掘金App的点赞组成部分,有一个小手,点赞数字.点赞气泡效果,还有一个震动反馈,接下来我们一步一步实现. 知识点:绘制.动画.震动反馈 绘制小手 这里我们使用Flutter的Icon图标中的点赞小手,Icons图标

  • Qt实现字幕滚动效果的示例代码

    Qt实现字幕滚动效果的示例代码

    目录 一.项目介绍 二.项目基本配置 三.UI界面设计 四.主程序实现 4.1 widget.h头文件 4.2 widget.cpp源文件 五.效果演示 一.项目介绍 利用QTimer实现字幕滚动功能,可以实现自行更改文本内容.自适应文本大小.自由调整速度等功能. 二.项目基本配置 新建一个Qt案例,项目名称为“TextScroll”,基类选择“QWidget”,取消创建UI界面复选框的选中状态,完成项目创建. 三.UI界面设计 无UI界面 四.主程序实现 4.1 widget.h头文件 声明私

  • Android实现自动文本框提示功能

    Android实现自动文本框提示功能

    本文实例为大家分享了Android实现自动文本框提示的具体代码,供大家参考,具体内容如下 activity_main.xml布局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" a

  • Vue 实现展开折叠效果的示例代码

    Vue 实现展开折叠效果的示例代码

    本文介绍了Vue 实现展开折叠效果的示例代码,分享给大家,具体如下: 效果如见: 1.html代码 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js文本段落展开和收拢效果</title> <script type="text/javasc

  • Android输入框实时模糊搜索效果的示例代码

    Android输入框实时模糊搜索 很多开发场景会用到搜索框实时模糊搜索来帮助用户输入内容,如图 思路是在EditText 字符变动的时候 弹出ListPopupwindow并更新列表,这样的做法google已经封装为AutoCompleteTextView 用法 mAutoCompleteTextView.setAdapter(adapter); mAutoCompleteTextView.setFocusable(true); mAutoCompleteTextView.setOnItemCl

  • Vue实现鼠标经过文字显示悬浮框效果的示例代码

    需求 在所做的Vue项目中,需要在鼠标移动文字框的时候显示一些详细信息.最终实现的效果如下: 鼠标经过button的时候,可以在光标附近显示出一个悬浮框,显示框里面显示时间和值的信息,鼠标移出button元素的时候,这个显示框会消失. 分析 涉及到鼠标的移动事件. 鼠标事件有下面这几种: 1.onclick(鼠标点击事件) box.onclick = function(e){ console.log(e) } 2.onmousedown(鼠标按下事件) box.onmousedown = fun

  • pygame用blit()实现动画效果的示例代码

    pygame用blit()实现动画效果的示例代码

    pygame的的实现动画的方法有很多,但是都是围绕着表面进行的,也就是说实现动画的方式不同,但是本质其实都是对表面的不同处理方式而已. 原理其实很简单,有点像我们做地铁的时候隧道里的广告一样.我们设置一个窗口.然后让窗口在一个画着很多帧图像的图上面移动,当我们透过这个窗口去观察这幅图的时候,只要窗口沿着一个方向去运动,那么就会产生动画效果. 今天我介绍的是通过块传输的方法去实现. surface.blit(image,(x,y),rect)  在这里surface.blit()这个方法应该大家都

随机推荐