注意：淘宝的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. [bzoj1617][Usaco2008 Mar]River Crossing渡河问题_动态规划

    River Crossing渡河问题 bzoj-1617 Usaco-2008 Mar 题目大意:题目链接. 注释:略. 想法:zcs0724出考试题的时候并没有发现这题我做过... 先把m求前缀和, ...

  2. Ubuntu 16.04设置开机启动应用程序

    在终端通过以下命令进行设置,Dash已经搜索不到Startup了: gnome-session-properties 或者直接在Dash中搜索:gnome-session

  3. Java 注解入门实例 &amp;&amp; 注解传參

    參考 概念:java提供了一种原程序中的元素关联不论什么信息和不论什么元数据的途径和方法 JDK内置系统注解: @Override 用于修饰此方法覆盖了父类的方法; @Deprecated 用于修饰已 ...

  4. mac 下安装caffe(二）

    使用Anaconda Python 1.brew edit opencv args << "-DPYTHON_LIBRARY=#{py_lib}/libpython2.7.#{d ...

  5. 批量将网页转换成图片或PDF文档技巧分享

    工作中我们有时要将一些批量的网页转换成图片或者PDF文档格式,尽管多数浏览器具有滚动截屏或者打印输出PDF文档功能.可是假设有几十上百张网页须要处理,那也是要人命的.所以我一直想找一款可以批量处理该工 ...

  6. Codeforces Round #329 (Div. 2)B. Anton and Lines 贪心

    B. Anton and Lines   The teacher gave Anton a large geometry homework, but he didn't do it (as usual ...

  7. Cache-control no-transform Robots Exclusion Protocol

    蜘蛛协议 <今日头条>支持蜘蛛协议(Robots Exclusion Protocol)"ToutiaoSpider",同时,我们尊重所有的网络媒体,如媒体不希望内容被 ...

  8. T4模板使用记录，生成Model、Service、Repository

    自己目前在搭建一个.NET Core的框架,本来是打算使用前端做代码生成器直接生成到文件的,快做好了.感觉好像使用T4更方便一些,所以也就有了这篇文章~  我还是有个问题没解决,就是我想生成每个类(接 ...

  9. BZOJ 3514 LCT+主席树

    思路: //By SiriusRen #include <bits/stdc++.h> using namespace std; ; ],fa[N],minn[N],rev[N],q[N] ...

  10. ACM_水题你要信了（修改版）

    水题你要信了 Time Limit: 2000/1000ms (Java/Others) Problem Description: 某发最近又认识了很多妹(han)子,可是妹(han)子一多不免有时会 ...