JS——input标签注册事件
注意：淘宝的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标签注册事件的更多相关文章
- 为input标签绑定事件的几种方式
为input标签绑定事件的几种方式 1.JavaScript原生态的方式,直接复制下面的代码就会有相应的效果 <!DOCTYPE html><html><head> ...
- JS高级——封装注册事件
兼容性问题 1.ele.on事件类型 = function(){}一个元素ele注册一种事件多次,会被替换成最后一个,所以有局限性 2.addEventListener(事件类型,事件处理函数,use ...
- input标签的事件汇总
我在做一个注册时用到了,在网上查的,比较碎.就汇总了下, 1.onfocus 当input 获取到焦点时触发 2.onblur 当input失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点 ...
- input标签的事件之oninput事件
最近在写前端的时候,用到了oninput事件.(其中也涉及了onclick) 问题:鼠标点击数字和运算符的时候,文本框里的内容到达一定长度时,会出现无法继续往后面跟随光标的问题. 解决:见下面代码 这 ...
- 如何用input标签上传多个图片并回显
本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图 我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input-file ...
- js中一次性注册多个事件
在js中,如果想一次性给一个控件或者标签初测多个事件的方法: 假如有个<input>标签: <input id=”inputValue” value=”www.baidu.com”/ ...
- input 标签的监听事件总结
最近在写一个手机端提交表单的项目,里面用了不少input标签,因为项目不太忙,所以,想做的完美点,但是遇到了一些问题,比如:页面中的必填项如果有至少一项为空,提交按钮就是不能提交的状态,所以需要对所有 ...
- 【整合】input标签JS改变Value事件处理方法
某人需要在时间控件给文本框赋值时,触发事件函数.实现的效果: 1.文本框支持手工输入,通过用户输入修改值,手工输入结束后触发事件.阻塞在于失去焦点后才触发(输入过程中不触发事件) 2.通过JS方法修改 ...
- JS注册事件
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title&g ...
随机推荐
- BAT、网易、京东等如何做大数据风控的？
大数据风控目前应该是前沿技术在金融领域的最成熟应用,相对于智能投顾.区块链等还在初期的金融科技应用,大数据风控目前已经在业界逐步普及,从BATJ这样的大企业,到交易规模比较大的网贷平台,再到做现金贷. ...
- python中实现将普通字典dict转换为java中的treeMap
上代码: from heapq import heappush,heappop from collections import OrderedDict def toTreeMap(paramMap): ...
- Crashing Robots POJ 2632 简单模拟
Description In a modernized warehouse, robots are used to fetch the goods. Careful planning is neede ...
- wait、notify应用场景（生产者-消费者模式）
Java实现生产者消费者的方式有:wait && notify.BlockingQueue.Lock && Condition等 wait.notify注意事项:(1) ...
- T5090 众数 codevs
http://codevs.cn/problem/5090/ 时间限制: 1 s 空间限制: 1000 KB 题目等级 : 青铜 Bronze 题目描述 Description 由文件给出N个1到 ...
- MAPZONE GIS SDK接入Openlayers3之三——瓦片数据集接入
瓦片数据集接入实现思路: 1.构造ol.source.TileImage数据源,构造该数据源需要以下几项: 1)空间参考,通过如下代码构造 2)TileGrid,构造需要以下几项: a)原点 b)分辨 ...
- SQL Error (2013): Lost connection to MySQL server at 'waiting for initial communication packet', system error: 0 解决方案
远程服务器的操作系统:Ubuntu 本地:navicat +win10 连接名:随意填写 主机名:localhost 端口:3306 用户名:连接电脑的数据库的用户名 密码:连接电脑的数据库的密码 主 ...
- 线段树专题 POJ3468 A Simple Problem with Integers
题意:n个点.m个操作.两种操作类型.C X Y K 表示区间[x,y]上每一个点值加k.Q X Y 求区间[x,y]的和 分析:线段树区间求和,裸模板 注意:结果会超int,要用long long ...
- xcode,git tips
change organization name 选中project or target,最右侧Utilities面板->Project Document 修改source folder名字 - ...
- 【敬业福bug】支付宝五福卡敬业福太难求 被炒至200元
016年央视春晚官方独家互动合作伙伴--支付宝,正式上线春晚红包玩法集福卡活动. 用户新加入10个支付宝好友,就可以获成3张福卡.剩下2张须要支付宝好友之间相互赠送.交换,终于集齐5张福卡就有机会平分 ...