<!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. 如何解决angular不自动生成spec.ts文件

    "schematics":{   "@schematics/angular:component": {        "styleext": ...

  2. linux初学者常用必备命令整理

    Linux命令学习 1.文件&目录处理 ls -a 全部文件 -l 详细信息 -r 递归显示子目录结构 ls -al 相当于 ls -a -l cd ..上级目录 .当前目录 ~家目录 cd ...

  3. 如何程序化的构造Hibernate配置 // How to initialize Hibernate programmably

    Java为什么被人诟病,因为一切都是过度设计.Hibernate其实就是实现了一套JPA的ORM,不过用极度冗赘的配置方式,nodejs Sequelize.js,甚至Python SQLAlchem ...

  4. GIT的使用（Gitlab上传本地仓库代码，Webstorm修改更新）

    准备:GIT的安装,Gitlab账户登陆,webstorm的安装 1.首先,你得先会在Gitlab中创建一个团体,在团体中创建一个项目,先建组,再建项目,网上哪里都有教程,随便找了个网址: https ...

  5. FT 软件项目管理

    FT 软件项目: 以Feature Team形式组织起来的软件研发项目. 项目是临时组织不是长期组织.  人员临时组织起来, 无组织汇报关系.大家需要充分理解和认同项目的目标,通过项目获得技术.经验. ...

  6. Word Count作业

    Word Count作业 一.个人Gitee地址:https://gitee.com/Changyu-Guo 二.项目简介 该项目主要是模拟Linux上面的wc命令,基本要求如下: 命令格式: wc. ...

  7. 深入理解Mysql索引的底层数据结构 B+ Tree （2）

    sql查询 explain的详细用法 操作时间:寻道时间+旋转时间 引入索引:采用二叉树结构 把第二列做为索引生成二叉树结构,此时查询89 只做了两次io操作 但是mysql 为什么不用二叉树作为底层 ...

  8. Python XML解析之DOM

    DOM说明: DOM:Document Object Model API DOM是一种跨语言的XML解析机制,DOM把整个XML文件或字符串在内存中解析为树型结构方便访问. https://docs. ...

  9. python开发规范和（configparser、random模块）

    目录结构: bin:存放程序入口,程序启动文件. conf:存放配置文件,配置文件主要是一些全局变量,路径信息等. core:程序核心文件,不涉及到业务逻辑. app:存放和系统业务相关的逻辑. db ...

  10. c/c++ 继承与多态 继承时如何改变个别成员的访问属性

    问题1:若类B以private的方式继承类A,但还想让类A的某些个别成员,保持public或者protected的访问属性,这时应该怎么办? 使用using,去改变访问属性. #include < ...