javascript搜索框点击文字消失失焦时文本出现

当获焦时,文本消失,失焦时文本出现

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<input id="text" type="text" value="点我就消失"/>
<script>
var oText=document.getElementById("text");
var onoff=true;
oText.color="#000";
oText.onfocus=function(){
if(onoff){
this.value="";
this.color="red";
onoff=false;
}
}

oText.onblur=function(){
if(this.value==''){
this.color="#000";
this.value="点我就消失";
onoff=true;
}
}
</script>
</body>
</html>
赞 (0)

相关推荐

  • JS+CSS实现仿新浪微博搜索框的方法

    本文实例讲述了JS+CSS实现仿新浪微博搜索框的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/xhtm

  • JavaScript实现搜索框的自动完成功能(一)

    在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的. 先给大家展示下效果图: 实现这个功能需要服务端配合.客户端通过脚本来展示从服务端取得的数据. 先看客户端的HTML: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT

  • js实现搜索框关键字智能匹配代码

    js实现搜索框关键字智能匹配代码

    只要使用搜索引擎的朋友应该都有这样的体会,就是当在搜索框输入关键字的时候,会出现自能匹配现象,这绝对是非常好的用户体验,下面就是一段类似的代码,当然这里只是掩饰,所以只能匹配的数据都是本地固定好的,在实际应用中可以才能够数据库读取数据. 效果图: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" co

  • JS实现仿google、百度搜索框输入信息智能提示的实现方法

    本文实例讲述了JS实现仿google.百度搜索框输入信息智能提示的实现方法.分享给大家供大家参考.具体如下: <!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&qu

  • javascript搜索框效果实现方法

    本文实例讲述了javascript搜索框效果实现方法.分享给大家供大家参考.具体实现方法如下: <!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搜索框文字可删除功能,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS实现搜索框文字可删除</title> <style> *:focus {outline: none; } body {width: 400px;margin: 100px auto;} #topsearch {

  • javascript搜索框点击文字消失失焦时文本出现

    当获焦时,文本消失,失焦时文本出现 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <input id="text" type="text" value="点我就消失"/> <scrip

  • javascript自动恢复文本框点击清除后的默认文本

    本文实例介绍了点击文本框清除默认文本离开再恢复的js实例代码,分享给大家供大家参考,具体内容如下 相关知识: 1.onclick事件的定义和用法: 当点击对象的时候会触发此事件. 浏览器支持: 1).IE浏览器支持此事件. 2).火狐浏览器支持此事件. 3).Opera浏览器支持此事件. 4).谷歌浏览器支持此事件. 5).safria浏览器支持此事件. 实例代码: <html> <head> <meta charset="gb2312"/> <

  • JavaScript实现百度搜索框效果

    JavaScript实现百度搜索框效果

    最近做了个百度搜索框今天给大家分享下. 效果: 1.当进入界面时,自动调用方法,获取当前的时间,并且实时更新时间. 2.点击页面头部的换肤,自动更换背景图片 3.鼠标点击搜索框的时候自动显示用户上次搜索的内容, 4.当鼠标放在用户上次搜索的内容的时候搜索框的内容变成鼠标悬浮的内容上 5.在搜索框中按回车的时候自动录入为上次输入的内容中,若本次内容和上次内容相同则不显示 6.点击百度一下按钮自动录入搜索框中的内容为上次搜索的内容 界面: 界面html代码: <!DOCTYPE html> <

  • Android搜索框（SearchView）的功能和用法详解

    SearchView是搜索框组件,它可以让用户在文本框里输入文字,通过监听器取得用户的输入,当用户点击搜索时,监听器执行实际的搜索. 1.SearchView组件的常用方法如下: ①setIconifiedByDefault(boolean iconified) ===> 设置搜索框默认是否自动缩小为图标. ②setOnQueryTextListener(SearchView,OnQueryTextListener listener) ===> 为搜索框设置监听器 ③setSubmitButt

  • 得到文本框选中的文字，动态插入文字的js代码

    复制代码 代码如下: <script language="javascript" src="js/settags.js"></script>  function AppTag(tagcode)  {   document.PostMessage.Message.value += tagcode;  } function InsertTag(tagbegin,tagend)  {   if ((document.selection)&&

  • 文本框点击时文字消失，失去焦点时文字出现

    文本框点击时文字消失,失去焦点时文字出现 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(m

  • 自动完成的搜索框javascript实现

    自动完成的搜索框javascript实现

    在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的. 我们这次就来实现这一效果. 我们通过两篇文章来进行讲解. 首先我们来完成界面的设计布局. 界面的HTML结构, 第一个少不了的是一个搜索框, 第二个就是搜索的点击按钮. <div class="search"> <input type="text" value=""

  • JavaScript仿京东搜索框实例

    JavaScript仿京东搜索框实例

    马上就到双十一了,我们在京东淘宝购物,疯狂剁手的同时,有没有注意到京东的搜索框呢,除了能进行搜索内容以外,它的样式又是如何实现的呢? 下面就分析一下如何实现仿京东的搜索框. 核心分析: JavaScript部分: 1.当文本框获取焦点的时候,div中的字体颜色变为rgb(200,200,200): 2.当文本框失去焦点事件发生时,div中的字体颜色变成原来的样式#989898: 3.当文本框输入内容时,div的属性变为 none,表现效果为文字消失: 4.当清除文本框里面内容时,divdiv的属

  • Js制作点击输入框时默认文字消失的效果

    为了提高用户体验和易用度,一些设计师会对网页中用户经常用的东西进行优化,比如输入框.一般的输入框是怎样优化的呢?从用户体验的角度出发,简化用户使用步骤,让用户用得更方便就是提高了易用性,例如当鼠标悬浮在输入框时改变输入框颜色.自动选中输入框中的默认文字,或者点击输入框时自动清除默认内容等等. 这个效果听起来复杂,其实做起来却很简单,只要一小段javascript代码即可解决.下?面介绍一下几种效果的代码: 1.点击输入框选中内容的Html代码: <form id="form1"

随机推荐