javaScript

最新推荐文章于 2023-10-15 10:58:51 发布
最新推荐文章于 2023-10-15 10:58:51 发布
阅读量339 收藏
点赞数
文章标签： javascript function xhtml input html border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shsunge/article/details/6481125
版权

输入文本框时的友好提示

 

在输入文本框内容时，有时候需要提示用户输入的内容，为了更友好的提示用户，我用js写了一种方法，当点击文本框时，在文本框右边提示用户要输入的信息。

 

在输入内容前，显示如图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=utf-8" />

<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+"";

         }

         function notTip(){

                   var dads  = document.all.tipDiv.style;

                   dads.display="none";

         }

</script>

</head>

 

<body>

<form action="" method="get">

  <blockquote>

    <blockquote>

      <p align="center">

      &nbsp;&nbsp;【提示控件演示】<br/>

        用户名：

        <input name="dd"  onBlur="notTip()" type="text"  οnfοcus="tip(this,'可输入用户名或邮箱')"/><br/>&nbsp;&nbsp;&nbsp;

       密码： <input name="dd"  onBlur="notTip()" type="text"  οnfοcus="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>

</div>

</body>

</html>

 

 

 

shsunge
关注
js jquery 自动在文本框提示信息
05-31
自动在文本框提示信息自动在文本框提示信息自动在文本框提示信息自动在文本框提示信息 jquery
输入文本框时的友好提示
老罗技术专栏
12-11 606
输入文本框时的友好提示 在输入文本框内容时，有时候需要提示用户输入的内容，为了更友好的提示用户，我用js写了一种方法，当点击文本框时，在文本框右边提示用户要输入的信息。 在输入内容前，显示如图1所示图1当用户名的文本框或得焦点时，效果如图2所示 图2当密码文本框或得焦点时，效果如图3所示 图3 演示的源代码如下：
JS输入框提示
HeyinB的博客
07-05 7564
先写出html格式 &lt;div class="box"&gt; &lt;div class="left"&gt; &lt;input type="text" id="phone" placeholder="输入11位的账号"&gt; &lt;/div&gt; &lt;div class="FM&quot
文本框获得焦点后文本框内的提示文本消失 失去焦点后如果没有输入再显示提示
丨Fanny丨Cri
02-05 1371
this.className='huise'和this.className='heise' 是指当文本框内是提示文字时显示的灰色，如果是关键字的话改为正常的黑色 这是这两个样式： .huise{ color:#999999;} .heise{ color:#000000;}
js文本框输入提示功能,js输入框旁边提示文字
wenangou的博客
10-15 1102
在前端开发中，我们经常需要与用户进行交互，其中弹出提示框是一种常见的方式。JavaScript提供了一个简单而有效的方法来实现该功能，即使用提示框（Alert）大家好，小编为大家解答js弹出输入框,输入并保存值的问题。很多人还不知道js文本框输入提示功能，现在让我们一起来看看吧！提示框是一种简单的对话框，用于显示一条消息并等待用户响应。它可以用于警告用户、提供信息或确认某些操作。JavaScript - 基础提示框的使用。
javascript
02-10
JavaScript是一种广泛用于网页开发的脚本语言，它是实现Web前端交互功能的核心技术之一。在给定的文件内容中，我们可以提取到关于JavaScript的多个知识点： 1. JavaScript的变量类型：JavaScript中主要有几种基本的...
使用JavaScript的手机JavaScript编辑器-JavaScript开发
05-26
myConsole一个JavaScript手机编辑器。 它的实时版本在这里托管。 如果需要，您可以将其作为应用程序添加到手机中。 只需单击菜单/添加到您的主屏幕即可。 您在手机的myConsole A JavaScript编辑器中看到的代码。 它...
基于Javascript的个人博客网站设计源码
最新发布
03-29
这是一个基于Javascript的个人博客网站设计，使用Javascript和CSS语言开发，包含217个文件。主要文件类型包括106个Pug模板文件、45个Stylus样式文件、31个JavaScript文件、15个YAML配置文件、6个Markdown文档、5个...
ArcGis-for-javaScript最全中文API.pdf
06-28
ArcGIS JavaScript API 介绍与示例 ArcGIS JavaScript API 是 ESRI 提供的一种基于 JavaScript 的开发工具，允许开发者创建交互式的 Web 地图应用程序。本文将对 ArcGIS JavaScript API 进行详细的介绍，并提供多个...
利用noesis.Javascript开源组件.Net中执行javascript脚本
10-26
标题中的“利用noesis.Javascript开源组件.Net中执行javascript脚本”是指在.NET环境中使用Noesis.Javascript这个开源库来运行JavaScript代码，并且允许JavaScript与C#代码进行交互。Noesis.Javascript组件使得...
js-input输入框提示语
05-03
js-input输入框提示语
input文本框里面显示提示信息
11-23
input文本框里面显示提示信息，鼠标点击文本框提示信息自动消失！
禁用JavaScript时的友好提示
03-19
NULL 博文链接：https://xredman.iteye.com/blog/696119
html 文本框智能提示,js文本框输入内容智能提示效果
weixin_36335482的博客
06-03 753
本文实例讲述了js文本框输入内容智能提示效果代码。分享给大家供大家参考。具体如下：运行效果截图如下：大体思路：1.监听文本框事件。这里是用的keyup事件。大家可以尝试用onchange事件。不过感觉keyup事件的效果要好一点。2.根据输入内容通过ajax异步的方式去访问后台数据。3.遍历返回数据将数据添加到显示区域。4.在添加数据的同时给每一条数据加上一些效果，点击其中一条将数据填到文本框，并...
MFC友好信息提示类
itas109的专栏
09-01 1196
如需转载请标明出处：http://blog.csdn.net/itas109 QQ技术交流群：129518033 本文实现了类似QQ弹出窗口的功能，并封装成类。 主要功能： 1、动画弹出，可以设置类型 2、弹出信息后自动消失。  3、可以设置字体大小和颜色。  4、设置窗口停留时间和显示类型。  5、不占用主窗口的焦点。 整个工程下载地址： http://d
文本框的框内提示
yabo
09-05 206
最近遇到需要做到把输入框提示放入输入框内部的需求。不是太复杂的东西，但大概正因如此，没有找到完整的方案，于是自己写了一个。 代码贴在后面，把几个需要注意的点放在前面吧。 1，主要逻辑就是focus和blur时要干点什么。 2，使用title属性保存提示信息，一来没有多余的东西，二来还可以获得一个停留时的提示。 3，因为IE的password输入框的type属性只读，所以使用show&amp...
JavaScript之移动web友好提示
Jamson
11-16 430
关于移动web登录注册等等界面纯js+css实现友好提示 近期在写一个移动web项目，在做登录界面的时候想到一个状态提示问题，照着pc端web的话，一个友好的自定义弹窗就可以很好的解决，但是对于手机端的话看起来可能就不是很适合了 所以经过考虑，做的ajax静态提交，然后通过接口返回判断给出一定的界面响应 成功则： window.location.href = “你要跳转的url地址” 失败则:...
js表单验证，给出友好的提示
while(True): print('adorable')
05-31 512
js验证表单 注意： 只做非空验证, 只是个小demo 学习思想，onblur onfocus onsubmit的使用，给出友好提示 网上有很多有良好，强大的控件，用于用户输入 代码实现 js代码 <script> function check_form(form) { // 得到form表单的所有input标签 var els = form.getElementsByTagName("input"); for(var i = 0; i &lt
js实现输入框自动提示功能
wx_cookie的博客
10-16 1620
$("#titleInput").keyup(function(){ $("#titleInput").autocomplete({ source: GetReturnValue() }); }); function GetReturnValue() { var
日本JavaScript函数教学课件详解：背景色与样式控制
本教学课件是关于日语版的JavaScript编程语言，专注于讲解函数这一核心概念。课程内容包括以下几个部分： 1. **函数基础**: - 函数定义：讲解了如何在JavaScript中使用`function`关键字来创建一个名为`f`的函数，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值