JS实现输入框提示文字点击时消失效果

2024-02-28 10:46:12

本文实例讲述了JS实现输入框提示文字点击时消失效果。分享给大家供大家参考，具体如下：

在网页登陆框里的输入框里常常会看到提示你输入什么内容的字样颜色比较淡的，这个就是“文本框点击时文字消失，失去焦点时文字出现”这个效果；这个效果用个JS就可以完成，这个效果是做网站的人必备的JS代码；自己会写JS的写写也快，不会写的就需要代码收集以作备用，用到的时候就方便多了。

下面就是这个效果实现用到的JS代码：

<script language="JavaScript" type="text/javascript">
  function addListener(element,e,fn){
    if(element.addEventListener){
       element.addEventListener(e,fn,false);
     } else {
       element.attachEvent("on" + e,fn);
     }
  }
  var myinput = document.getElementById("myinput");
  addListener(myinput,"click",function(){
  myinput.value = "";
  })
  addListener(myinput,"blur",function(){
  myinput.value = "请输入您的ID";
  })
</script>

只要把这段代码保存成一个JS文件就可以的，在网页里做好引用就OK，轻松的完成这个给不会程序的人看起来很难的效果。

Html代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charsetGB2312" />
 <title>文本框点击时文字消失，失去焦点时文字出现</title>
 </head>
 <body>
 <input type="text" value="请输入您的ID" id="myinput" />
 </body>
</html>
<script language="JavaScript" type="text/javascript">
  function addListener(element,e,fn){
    if(element.addEventListener){
       element.addEventListener(e,fn,false);
     } else {
       element.attachEvent("on" + e,fn);
     }
  }
  var myinput = document.getElementById("myinput");
  addListener(myinput,"click",function(){
  myinput.value = "";
  })
  addListener(myinput,"blur",function(){
  myinput.value = "请输入您的ID";
  })
</script>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式

废话不多说了,直接给大家贴关键代码了,具体代码如下所示: <!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> <t
JS通过正则限制 input 输入框只能输入整数、小数(金额或者现金) 两位小数

第一: 限制只能是整数 <input type = "text" name= "number" id = 'number' onkeyup= "if(! /^d+$/.test(this.value)){alert('只能整数');this.value='';}" /> 如果不是整数就直接alert 第二: 限制是两位的小数 <input type = "text" name= "price&quo
JavaScript仿支付宝密码输入框

现在很多时候大家付款的场景都是在手机上面,而随着H5页面的开发变得越来越方便,很多场景也从客户端搬到了浏览器中,其中支付这个场景就很自然的被放在了浏览器中.那么这样的输入框大家一定不会陌生吧: 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签. 并且给这个5个input设置display: inline-block 属性,同时用<!- ->来消除元素直接的margin
js简单实现表单中点击按钮动态增加输入框数量的方法

本文实例讲述了js简单实现表单中点击按钮动态增加输入框数量的方法.分享给大家供大家参考.具体如下: 这里演示表单中点击按钮动态增加输入框数量的方法,默认是没有输入框,点击按钮之后,输入框会不断的增加,每点击一次,增加一个,觉得挺不错吧,希望对你有所帮助. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-input-button-add-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3
javascript仿百度输入框提示自动下拉补全

本文实例讲解了javascript输入框自动下拉补全操作,仿百度.谷歌搜索框提示,具体内容如下效果图: 具体代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="
JS实现方向键切换输入框焦点的方法

本文实例讲述了JS实现方向键切换输入框焦点的方法.分享给大家供大家参考.具体如下: 这里实现js方向键控制切换输入框焦点效果,不过无法兼容Firefox.当输入完毕按回车或按方向键可移动焦点至想要输入的文本框内,无需点击鼠标,对于经常录入数据的时候,这种功能可提高输入速度. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-input-cha-focus-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu
JS实现输入框提示文字点击时消失效果

本文实例讲述了JS实现输入框提示文字点击时消失效果.分享给大家供大家参考,具体如下: 在网页登陆框里的输入框里常常会看到提示你输入什么内容的字样颜色比较淡的,这个就是"文本框点击时文字消失,失去焦点时文字出现"这个效果:这个效果用个JS就可以完成,这个效果是做网站的人必备的JS代码:自己会写JS的写写也快,不会写的就需要代码收集以作备用,用到的时候就方便多了. 下面就是这个效果实现用到的JS代码: <script language="JavaScript" t
js控制输入框获得和失去焦点时状态显示的方法

本文实例讲述了js控制输入框获得和失去焦点时状态显示的方法.分享给大家供大家参考.具体实现方法如下: <!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"&
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例

本文实例讲述了JS实现鼠标拖拽盒子移动及右键点击盒子消失效果.分享给大家供大家参考,具体如下: 1. 鼠标拖拽盒子移动效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } div{ width: 1
jQuery插件EnPlaceholder实现输入框提示文字

用法: 首先在head中分别引入jQuery及本插件 <script type="text/javascript" src="jquery-1.7.2.min.js">script> <script type="text/javascript" src="jquery.enplaceholder.js">script> 然后就可以调用鸟 //通过value模拟placeholder $('i
js右下角弹出窗口,点击可关闭效果

body { background:#333333;} #winpop { width:200px; height:0px; position:absolute; right:0; bottom:0; border:1px solid #999999; margin:0; padding:1px; overflow:hidden;display:none; background:#FFFFFF} #winpop .title { width:100%; height:20px; line-hei
基于JS实现html中placeholder属性提示文字效果示例

本文实例讲述了基于JS实现html中placeholder属性提示文字效果.分享给大家供大家参考,具体如下: 如何通过js实现html的placeholder属性效果呢我们需要这样做: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS实现placeholder属性效果</title> <script>
jquery实现表单输入时提示文字滑动向上效果

本文实例讲述了jquery实现表单输入时提示文字滑动向上效果.分享给大家供大家参考.具体如下: 这里基于jQuery实现的表单输入框提示效果,当不输入的时候,提示文字就显示在输入框中,当鼠标点击文本框要输入文字的时候,提示文字向滑出输入框,好像很个性也很智能的样子,用户体验比较不错,运用了CSS3的部分属性,因此在测试时,请尽量要用高版本的IE9或chrome和火狐等网页浏览器. 运行效果截图如下: 具体代码如下: <!doctype html> <html> <head&g
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例

本文实例讲述了jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能.分享给大家供大家参考,具体如下: 最近都成为页面仔了,主要工作都放在了前段,以前总是写后台程序,对前端的一些技术 html,css,javascript ,虽然都懂一些,但要做出比较好看页面,还是有很大的差距的.最近就遇到了这样一个要求不是很高,但有点小清新风格的登录或注册页面,要求如下: 1. 在输入框中如果没有内容,则显示提示:比如"请输入用户名" 2. 如果输入框获得焦点,则隐藏提示 3.
input 标签实现输入框带提示文字效果(两种方法)

方法一:html5配合css3实现带提示文字的输入框(摆脱js): webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登录.搜索等位置很适合,感兴趣的你可以参考下本文或许可以帮助到你,Webkit作为载体开发系统,当然需要大量使用Html5与CSS3,不仅减少大量的JS还可以保证更流畅. 当选中对话框后,提示文字变浅色,输入后消失.这个现在通行的做法是在Input标签后面增加一个Label.使用JS控制. HTML5
修改js confirm alert 提示框文字的简单实例

修改js confirm alert 提示框文字的简单实例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <style> *{padding: 0; margin: 0;} html{ height: 100%; } body{ font-size: 16px; font-family: "Microsoft Yahe

JS实现输入框提示文字点击时消失效果

相关推荐

随机推荐