<!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. Linux设备驱动之IIO子系统——IIO框架数据读取

    IIO DATA ACCESS IIO数据获取 只有两种方法可以使用IIO框架访问数据; 通过sysf通道进行一次性捕获,或通过IIO字符设备进行连续模式(触发缓冲). One-shot captur ...

  2. C#：在匿名方法中捕获外部变量

    先来一段代码引入主题.如果你可以直接说出代码的输出结果,说明本文不适合你.(代码引自<深入理解C#>第三版) class Program { private delegate void T ...

  3. JAVA项目从运维部署到项目开发(三.Redis)

    一.Redis的介绍 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.它通常被称为数据结构服务器,因为值(va ...

  4. pip install PIL The _imagingft C module is not installed

    需要先删除PIL再进行安装 sudo pip uninstall -y PIL 删除PIL相关文件夹:/usr/local/bin/pil , usr/lib/python2.7/dist-packa ...

  5. 用Angular部署Cesium

    用到的集成开发环境是WebStrom,Cesium版本是1.50.0,Angular版本是6.2.4  1.首先我们安装cesium,在webstorm中的Termianl中输入 npm instal ...

  6. 算法"新"名词

    这个“新”是对于自己而言. 最近几天接触到很多新的名词,如: 回溯法(backtracking):以前知道,但很少用 动态规划(dynamic programming):序列型.矩阵型.区间型.背包等 ...

  7. 【Teradata SQL】十进制转换成二进制

    1.数值类型转换为二进制(TO_BYTE+FROM_BYTES) sel FROM_BYTES(TO_BYTE(),'base2');  2.字符串类型转换为二进制(TO_BYTES+FROM_BYT ...

  8. RabbitMQ安装后无法访问https://localhost:15672/ 控制台问题解决

    1.安装完后 我们进入到我们安装到 sbin目录C:\Program Files\RabbitMQ Server\rabbitmq_server-3.7.2\sbin执行:rabbitmq-plugi ...

  9. 【转】从源码分析Handler的postDelayed为什么可以延时？

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/aliankg/article/details/70842494Thread/Hander/Loope ...

  10. 【转】Android调用Sqlite数据库时自动生成db-journal文件的原因

    数据库为了更好实现数据的安全性,一半都会有一个Log文件方便数据库出现意外时进行恢复操作等.Sqlite虽然是一个单文件数据库,但麻雀虽小五脏俱全,它也会有相应的安全机制存在 这个journal文件便 ...