注意：淘宝的lable是用定位制作的，事件是oninput事件

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .wrong {

            border: 2px solid red;

        }

        .right {

            border: 2px solid #91B81D;

        }

        .lab {

            position: absolute;

            top: 56px;

            left: 60px;

            cursor: text;

            color: #ccc;

            font-size: 12px;

        }

        .show{

            display:block;

        }

        .hide{

            display:none;

        }

    </style>

</head>

<body>

    京东：<input type="text" name="name" value="我是京东" id="inp1" /><br /><br />

    淘宝：<label for="inp2" id="lab" class="lab">我是淘宝</label><input type="text" name="name" value="" id="inp2" />

    <script>

        var inp1 = document.getElementById("inp1");

        var inp2 = document.getElementById("inp2");

        var lab = document.getElementById("lab");

        //inp1.onfocus();//页面加载完之后input标签就获取光标焦点

        inp1.onfocus = function () {

            if (inp1.value === "我是京东") {

                inp1.value = "";

            }

        }

        inp1.onblur = function () {

            if (inp1.value === "") {

                inp1.value = "我是京东";

            }

        }

        inp2.oninput = function () {

            if (inp2.value === "") {

                lab.className = "lab show";

            } else {

                lab.className = "lab hide";

            }

        }

    </script>

</body>

</html>

JS——input标签注册事件的更多相关文章

  1. 为input标签绑定事件的几种方式

    为input标签绑定事件的几种方式 1.JavaScript原生态的方式,直接复制下面的代码就会有相应的效果 <!DOCTYPE html><html><head> ...

  2. JS高级——封装注册事件

    兼容性问题 1.ele.on事件类型 = function(){}一个元素ele注册一种事件多次,会被替换成最后一个,所以有局限性 2.addEventListener(事件类型,事件处理函数,use ...

  3. input标签的事件汇总

    我在做一个注册时用到了,在网上查的,比较碎.就汇总了下, 1.onfocus  当input 获取到焦点时触发 2.onblur  当input失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点 ...

  4. input标签的事件之oninput事件

    最近在写前端的时候,用到了oninput事件.(其中也涉及了onclick) 问题:鼠标点击数字和运算符的时候,文本框里的内容到达一定长度时,会出现无法继续往后面跟随光标的问题. 解决:见下面代码 这 ...

  5. 如何用input标签上传多个图片并回显

    本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图 我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input-file ...

  6. js中一次性注册多个事件

    在js中,如果想一次性给一个控件或者标签初测多个事件的方法: 假如有个<input>标签: <input id=”inputValue” value=”www.baidu.com”/ ...

  7. input 标签的监听事件总结

    最近在写一个手机端提交表单的项目,里面用了不少input标签,因为项目不太忙,所以,想做的完美点,但是遇到了一些问题,比如:页面中的必填项如果有至少一项为空,提交按钮就是不能提交的状态,所以需要对所有 ...

  8. 【整合】input标签JS改变Value事件处理方法

    某人需要在时间控件给文本框赋值时,触发事件函数.实现的效果: 1.文本框支持手工输入,通过用户输入修改值,手工输入结束后触发事件.阻塞在于失去焦点后才触发(输入过程中不触发事件) 2.通过JS方法修改 ...

  9. JS注册事件

    <html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title&g ...

随机推荐

  1. 网线切割&切绳子

    题目描述 Wonderland居民决定举行一届地区性程序设计大赛.仲裁委员会志愿负责这次赛事并且保证会组织一次有史以来最公正的比赛.为此,所有参赛者的电脑和网络中心会以星状网络连接,也就是说,对每个参 ...

  2. NOIP2005 树网的核

    题目描述 Description [问题描述]设 T=(V, E, W) 是一个无圈且连通的无向图(也称为无根树),每条边带有正整数的权,我们称T 为树网(treenetwork),其中V, E分别表 ...

  3. 【转】gcov lcov 覆盖c/c++项目入门

    原文: http://www.cnblogs.com/turtle-fly/archive/2013/01/09/2851474.html ------------------------------ ...

  4. The 2014 ACM-ICPC Asia Mudanjiang Regional Contest(2014牡丹江区域赛）

    The 2014 ACM-ICPC Asia Mudanjiang Regional Contest 题目链接 没去现场.做的网络同步赛.感觉还能够,搞了6题 A:这是签到题,对于A堆除掉.假设没剩余 ...

  5. Apache 配置学习占位

    http://www.cnblogs.com/yeer/archive/2011/01/18/1938024.html http://www.cnblogs.com/zgx/archive/2011/ ...

  6. 【Spark】DAGScheduler源代码浅析

    DAGScheduler DAGScheduler的主要任务是基于Stage构建DAG,决定每个任务的最佳位置 记录哪个RDD或者Stage输出被物化 面向stage的调度层.为job生成以stage ...

  7. 负margin使用注意的一个问题

    在项目实力中经经常使用到负margin 如: <div id="test"> <ul> <li>子元素1</li> <li&g ...

  8. ASP.NET无法检测IE10浏览器，导致无法登录

    今天发现在IE10中打开我开发的网站时,无法登入,页面总会自动重新退出到登录页,后经上网查资料发现这是ASP.NET 2.0.3.5和4.0的Bugs,因这些版本的.NET Framework无法识别 ...

  9. BusyBox telnetd配置

    配置telnetd遇到的一些坑,记录一下 BusyBox版本1.22.1 Networking Utilities -->[*] telnetd 错误1: Escape character is ...

  10. Tarjan Algorithm

    List Tarjan Algorithm List Knowledge 基本知识 基本概念 复杂度 有向图 Code 缩点 Code 用途 无向图 Articulation Point-割顶与连通度 ...