<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .txt-input {color:#999;}
    </style>
</head>
<body>
    <form action="">
        <input type="text" name="keywords" value='三体' val='三体' class="txt-input" />
        <input type="submit" value="搜索" />
    </form>
    <script type="text/javascript">
        var inputs = document.getElementsByTagName('input');
        var dval = inputs[0].getAttribute('val');
        //给文本框注册focus事件
        inputs[0].onfocus = function(){
            //需要判断文本框中的内容是否是默认的
            //获取自定义属性
            //清除文本框中的内容
            if (this.value == dval) {
                this.value = "";
            }
            this.style.color = "#333";
        }
        //给文本框注册blur事件
        inputs[0].onblur = function(){
            //需要判断文本框中的内容是否为空
            if (this.value == '') {
                this.value = dval;
                this.style.color = "#999";
            }
        }
    </script>
</body>
</html>

placeholder效果的更多相关文章

  1. DIV实现CSS 的placeholder效果

    placeholder是HTML5中input的属性,但该属性并不支持除input以外的元素   但我们可以使用Css before选择器来实现完全相同的效果 <!DOCTYPE html> ...

  2. 【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果

    placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于 ...

  3. IE下支持文本框和密码框placeholder效果的JQuery插件

    基于jQuery实现的,主要用于IE下实现placeholder效果,可同时支持文本和密码输入框.placeholder是HTML5新增的一个属性,当input设置了该属性后,该值的内容将作为灰色提示 ...

  4. jQuery效果之封装模拟placeholder效果，让低版本浏览器也支持

    页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" pla ...

  5. 下拉列表模仿placeholder效果

    模仿placeholder效果 <select id="IsTop"> <option value="" disabled selected& ...

  6. Jquery简单的placeholder效果

    Jquery简单的placeholder效果 由于IE6-IE9不支持HTML5中的placeholder,所以自己依赖于Jquery简单的写了一个,供参考! 先看看效果吧!如下JSFiddle地址 ...

  7. jQuery实现ie浏览器兼容placeholder效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 跨浏览器实现placeholder效果的jQuery插件

    曾经遇到这样一个问题,处理IE8密码框placeholder属性兼容性.几经周折,这个方案是可以解决问题的. 1.jsp页面引入js插件 <script type="text/java ...

  9. placeholder 效果的实现，input提示字，获取焦点时消失

    <!doctype html><html><head><meta charset="utf-8"><title>plac ...

  10. 在IE8等不支持placeholder属性的浏览器中模拟placeholder效果

    placeholder是一个很有用的属性,可以提示用户在input框中输入正确的内容,但是IE8以及IE8一下的浏览器不支持该属性,我们可以使用js来模拟相似的效果.下面直接上代码: <!doc ...

随机推荐

  1. dsu on tree入门

    先瞎扯几句 说起来我跟这个算法好像还有很深的渊源呢qwq.当时在学业水平考试的考场上,题目都做完了不会做,于是开始xjb出题.突然我想到这么一个题 看起来好像很可做的样子,然而直到考试完我都只想出来一 ...

  2. git第一次提交代码到码云

    转载请标明出处:https://www.cnblogs.com/tangZH/p/10229598.html 不说废话,来看重点. 1.首先注册码云账号,然后建立仓库,这些就直接跳过,很简单. 2.下 ...

  3. 支持scrollTo的RecycleView

    RecycleView内部没有帮我们实现ScrollTo的方法,不过帮我们实现了ScrollBy,我们可以通过ScrollBy自定义一个支持scrollTo的RecycleView. public c ...

  4. 【Linux】SSH证书免密码远程登陆Linux(Putty)

    1.前言 新购置一台便宜服务器做数据库服务器,减轻Web服务器的压力. 为了安全性,root密码设置的非常复杂(随机生成),厌倦了拷贝密码登陆的历史. Putty基本用法都不会的请先花10分钟自行学习 ...

  5. c/c++ 多线程 多个线程等待同一个线程的一次性事件

    多线程 多个线程等待一个线程的一次性事件 背景:从多个线程访问同一个std::future,也就是多个线程都在等待同一个线程的结果,这时怎么处理. 办法:由于std::future只能被调用一次get ...

  6. Linux AIDE(文件完整性检测)

    一.AIDE的概念 AIDE:Advanced Intrusion Detection Environment,是一款入侵检测工具,主要用途是检查文档的完整性.AIDE在本地构造了一个基准的数据库,一 ...

  7. Extjs 判断对象是非为null或者为空字符串

    Ext.isEmpty(str,[allowEmptyString]) 如果str为 null undefined a zero-length array a zero-length string ( ...

  8. Python开发【第五篇】内置函数

    abs() 函数返回数字的绝对值 __author__ = "Tang" a = -30 all() 函数用于判断给定的可迭代参数iterable中的所有元素是否都为True,如果 ...

  9. styled components草根中文版文档

    1.styled components官网网址 https://www.styled-components.com/docs   以组件的形式来写样式. 1.1安装 yarn add styled-c ...

  10. tensorboard 可视化网络运行过程

    在 tf.summary 里设置好要查看保存的参数后运行会生成 events.out.tfevents.{time}.{machine-name} 的文件,这个就是用 tensorboard 来查看的 ...