<!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. maven也是apache下的项目

    maven也是apache下的项目,你看maven官网了,域名都在Apache下

  2. swift：入门知识之枚举和结构体

    枚举: swift中的枚举有些类似于类这个概念,它有自己的属性,也可以有自己的方法 枚举中的成员有原始值和实际值之分,原始值用来枚举成员的排序次序,默认从0开始 枚举出来的成员值就是实际值 可以通过t ...

  3. Netty4.x中文教程系列(五)编解码器Codec

    Netty4.x中文教程系列(五)编解码器Codec 上一篇文章详细解释了ChannelHandler的相关构架设计,版本和设计逻辑变更等等. 这篇文章主要在于讲述Handler里面的Codec,也就 ...

  4. Echarts - js

    <script type="text/javascript"> var myChart; myChart = echarts.init(document.getElem ...

  5. ExtJs布局大全

    1.Fit 布局 在Fit 布局中,子元素将自动填满整个父容器.注意:在fit 布局下,对其子元素设置宽度是无效的.如果在fit 布局中放置了多个组件,则只会显示第一个子元素.在Fit 布局中,子元素 ...

  6. Python得到两个时间段的每一天的列表

    date_list = [] begin_date = datetime.datetime.strptime(begin_date, "%Y-%m-%d") end_date = ...

  7. 如何理解JAVA的跨平台特性

    1.java的跨平台,是指java在运行时是凌驾于os之上,是在jvm中运行的,跟os没有直接联系. 2.java跨平台主要是由java的编译方式决定的,因为java是通过jvm先编译再执行,它编译的 ...

  8. poj -1065 Wooden Sticks （贪心or dp）

    http://poj.org/problem?id=1065 题意比较简单,有n跟木棍,事先知道每根木棍的长度和宽度,这些木棍需要送去加工,第一根木棍需要一分钟的生产时间,如果当前木棍的长度跟宽度 都 ...

  9. WebDriverExtensionsByC#

    测试工具//********************************************************************************************** ...

  10. Volley HTTP库系列教程(3)自定义RequestQueue和编写单例RequestQueue示例

    Setting Up a RequestQueue Previous  Next This lesson teaches you to Set Up a Network and Cache Use a ...