<!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. set用法小结

    set本质上是一棵红黑树,用法也就那么几个,插入删除lowerbound,再就是迭代器之类的 基本用法 begin()--返回指向第一个元素的迭代器 #include<cstdio> #i ...

  2. Xamarin 学习笔记 - Page（页面）

    本文翻译自CodeProject文章:https://www.codeproject.com/Articles/1226447/Xamarin-Notes-Xamarin-Forms-Pages 转载 ...

  3. React Native基础&入门教程：调试React Native应用的一小步

    React Native(以下简称RN)为传统前端开发者打开了一扇新的大门.其中,使用浏览器的调试工具去Debug移动端的代码,无疑是最吸引开发人员的特性之一. 试想一下,当你在手机屏幕按下一个按钮, ...

  4. c# 多线程委托传参方式

    1.定义一个线程调用的方法函数 private void RTPServer(object _Serverip) { IPEndPoint Serverip = _Serverip as IPEndP ...

  5. Rsync客户端卡死的问题查询

    简介 某备份系统大量使用rsync来传输文件,但是偶尔会出现rsync客户端在上传数据的时候长时间卡死,本文记录了解决问题的步骤. 本文只涉及rsync客户端中IO相关逻辑,关于rsync的发送算法并 ...

  6. LeetCode算法题-Range Addition II（Java实现）

    这是悦乐书的第271次更新,第285篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第138题(顺位题号是598).给定一个m行n列的新二维数组M,其初始值为0.提供一个二 ...

  7. Kafka 0.11.0.0 实现 producer的Exactly-once 语义（中文）

    很高兴地告诉大家,具备新的里程碑意义的功能的Kafka 0.11.x版本(对应 Confluent Platform 3.3)已经release,该版本引入了exactly-once语义,本文阐述的内 ...

  8. Ajax概述和判断用户名是否存在的简单代码练习

    在本代码中主要体现,Ajax实现了部分位置的刷新.不需要重新刷新网页,重新请求服务器.下面用过代码来对Ajax更深的认识 这里需要创建,一个jsp文件(显示登录界面),js文件(对Ajax的主要设置) ...

  9. koa 路由配置

    Koa 路由 路由(Routing)是由一个 URI(或者叫路径)和一个特定的 HTTP 方法(GET.POST 等) 组成的,涉及到应用如何响应客户端对某个网站节点的访问. 通俗的讲:路由就是根据不 ...

  10. Java线程锁，synchronized、wait、notify详解

    (原) JAVA多线程这一块有点绕,特别是对于锁,对锁机制理解不清的话,程序出现了问题也很难找到原因,在此记录一下线程的执行以及各种锁. 1.JAVA中,每个对象有且只有一把锁(lock),也叫监视器 ...