<!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>无标题文档</title>

<script type="text/javascript">

function addLoadEvent(func){

 var oldonload = window.onload;

 if(typeof window.onload!= 'function' ){

   window.onload = func;

 }

 else{

  window.onload = function(){

  oldonload();

  func();

  }

 }

}

var inputtext = function(){

 var inputs = document.getElementsByTagName('INPUT');

 for(var i=0; i<inputs.length; i++){

  var str = "gray_input";

  if(str.indexOf(inputs[i].className)==-1) continue;

  var element = inputs[i];

  element.onfocus = function() {

     if (this.value == this.defaultValue) {

        this.value = "";

     this.className = "gray_input2";

    }

     }

       element.onblur = function() {

       if (this.value == "") {

          this.value = this.defaultValue;

     this.className = "gray_input";

          }

        }

 }

}

addLoadEvent(inputtext);

</script>

<style>

.gray_input{color:#878787;}

.gray_input2{color:#444;}

</style>

</head>

<body>

<input name="text2" type="text" id="main_search3" class="gray_input" value="搜一下问题来回答"/>

</body>

</html>

input框内默认文字点击消失的更多相关文章

  1. HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置

    在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...

  2. 鼠标点击input框后里面的内容就消失

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. input框的默认bug解决办法

    input框的默认bug是在没干掉边框的情况下是不能设置背景颜色的,否则边框会变成内边框(黑色)效果,很难看. 解决办法是: none掉input框的边框:border:none; 再设置其背景色为任 ...

  4. 设计input搜索框提示文字点击消失的效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 消除input框的默认样式

    input, button, select, textarea { outline: none; -webkit-appearance: none; border-radius: 0; } outli ...

  6. 类似input框内最右边添加图标，有清空功能

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  7. input内文字点击消失 弹出层，可以写表单

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  8. js实现鼠标点击input框后里面的内容就消失代码

    <!--# <a href="http://www.mianfeimoban.com/texiao_mb/" target="_blank" cla ...

  9. ECSHOP搜索框文字点击消失

    <input name="keywords" type="text" id="keyword" value="黄山金银币&q ...

随机推荐

  1. React事件属性

    一.简介 二.滚动例子,滚动改变颜色 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta c ...

  2. Android笔记——PreferenceActivity结合PreferenceFragment创建设置界面

    1.创建类继承PreferenceActivity 2.该类必须重写OnBuildHeaders和isValidFragment方法.         (1)OnBuildHeaders方法中使用lo ...

  3. iOS Architecture

    目前ios的指令集有以下几种: armv6 iPhone iPhone2 iPhone3G 第一代和第二代iPod Touch armv7 iPhone4 iPhone4S armv7s iPhone ...

  4. [iOS]如何删除工程里面用cocoapods导入的第三方库

    如何在工程中卸载用cocoapods导入的第三方呢? 1. 打开工程所在文件夹 2. 打开Podfile文件 3. 删除不要的第三方导入命令 4. 然后在回到终端,然后进入到工程目录下,然后更新第三方 ...

  5. 【查找结构 2】二叉查找树 [BST]

    当所有的静态查找结构添加和删除一个数据的时候,整个结构都需要重建.这对于常常需要在查找过程中动态改变数据而言,是灾难性的.因此人们就必须去寻找高效的动态查找结构,我们在这讨论一个非常常用的动态查找树— ...

  6. JVM垃圾回收机制总结(3) ：按代垃圾收集器

    为什么要分代 分代的垃圾回收策略,是基于这样一个事实:不同的对象的生命周期是不一样的 . 因此,不同生命周期的对象可以采取不同的收集方式,以便提高回收效率. 在Java程序运行的过程中,会产生大量的对 ...

  7. ExtJs计算两个DateField所间隔的月份（天数） new Date(str) IE游览器提示NaN 处理

    需求:两个DateField控件,分别为开始时间和结束时间.当选择完结束时间后,自动计算这两个时间段所间隔的月或天数. 需要解决的问题: 1.直接使用Ext.getCmp('endDate').get ...

  8. WordPress搭建Personal Blog 个人博客

    早就想搭建一个专属于自己的博客了,用来记录自己生活.学习的点点滴滴.之所以选WordPress,主要是因为它可以支持Latex,而且特别喜欢其简约的风格. WordPress有个the famous ...

  9. java实现附件预览（openoffice+swftools+flexpaper）

    先附上本人参考的文章,基于的 flexpaper版本 为 1.5,本人由于使用的是 2.1.9 ,故之后说明: 已经支持加载中文文件名 代码下载 1.概述 主要原理 1.通过第三方工具openoffi ...

  10. Hibernate下的Many-to-Many的级联删除

    hibernate下的Many-to-Many的级联删除 Hibernate多对多的例子不少,但仔细一看,大多数都是保存的,删除谈的少,但问题还不少,因此有必须简单测试一下,以下我们来个简单的多对多关 ...