注意：淘宝的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. JS动态添加div，然后在div中添加元素

    需求: 组织部中有个这样的需求,根据年份动态显示该年份下的定性指标! 我的做法: 先是放一个空的div,让后根据指标的数据,动态的往div中添加元素. 代码: 空的div,存放定性指标 <div ...

  2. HashMap源码分析2：扩容

    本文源码基于JDK1.8.0_45. final Node<K,V>[] resize() { Node<K,V>[] oldTab = table; int oldCap = ...

  3. HDOJ 5402 Travelling Salesman Problem 模拟

    行数或列数为奇数就能够所有走完. 行数和列数都是偶数,能够选择空出一个(x+y)为奇数的点. 假设要空出一个(x+y)为偶数的点,则必须空出其它(x+y)为奇数的点 Travelling Salesm ...

  4. CentOS6.5 64位站点压力測试工具webbench

    在Apache中有自带的ab命令能够測试服务的压力,而nginx没有自带的命令,必需要採用第三方软件来測试.今天就简介一下webbench对nginx的压力測试,压力測试是对系统管理员和运维人员必须的 ...

  5. J2EE基础总结（5）——EJB

    什么是EJB     JB事实上就是企业Java Beans. EJB是J2EE平台的重要组成部分. J2EE平台基于组件的企业级应用架构,提供多 层次.分布式和高事务的功能特点.     EJB提供 ...

  6. CocoaPods pod instal慢、卡住解决方法

    CocoaPods pod install慢.卡住解决方法 近期使用CocoaPods来加入第三方类库,不管是运行pod install还是pod update都卡在了Analyzing depend ...

  7. oc const 关键字 对指针的理解

    /* int const *p; *p是常量, p是变量 const int *p; *p是常量, p是变量 int * const p; *p是变量, p是常量 const int * const ...

  8. Cocos2d-x 3.x 图形学渲染系列十五

    笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家.特邀编辑,畅销书作者,国家专利发明人;已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D ...

  9. java7 的final真的有坑啊。

    看这里:https://bugs.openjdk.java.net/browse/JDK-7004835 java8u20已经修复了.

  10. iOS界面之间的跳转方式

    iOS界面之间的跳转方式基本有3种. .改变window的根视图 [self.window setRootViewController:VC]; .模态弹出 [self presentViewCont ...