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 ...
随机推荐
- JS动态添加div，然后在div中添加元素
需求: 组织部中有个这样的需求,根据年份动态显示该年份下的定性指标! 我的做法: 先是放一个空的div,让后根据指标的数据,动态的往div中添加元素. 代码: 空的div,存放定性指标 <div ...
- cogs——908. 校园网
908. 校园网 ★★ 输入文件:schlnet.in 输出文件:schlnet.out 简单对比 时间限制:1 s 内存限制:128 MB USACO/schlnet(译 by Fe ...
- 用xtrabackup+binlog恢复误删除的数据库
关键技术,数据库产生的二进制文件,在主库就是binlog在从库就是relay-log,用最新的物理备份可以新启动个新实例,可以模拟个从库,把主库的binlog复制到新的数据库实例上,利用主从复制和物理 ...
- sqlalchemy foreign key查询和backref
首先在mysql中创建两个表如下: mysql) , primary key(id)); Query OK, rows affected (0.01 sec) mysql),user_id int, ...
- DATASNAP压缩过滤器的使用
ZLIBCOMPRESSION FILTER 作为范例,我们使用已随D2010提供的DataSnap过滤器.可用于在客户端和服务端压缩数据流.这里说的ZlibCompression过滤器可以在DbxC ...
- Node.js 博客实例（三）添加文件上传功能
原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第三章 上传文件眼下有三种方法: 使用 Express 自带的文件上传功能,不涉及数据库 使用 For ...
- Oracle Study之--Oracle 11gR2通过RMAN克隆数据库
Oracle Study之--Oracle 11gR2通过RMAN克隆数据库 Purpose of Database Duplication A duplicate database is usefu ...
- 软考-系统开发与软件project
关于软件project方面的知识,相信大家都不陌生,软考中这部分知识也是重点考察范围,关于软件project的知识点很的琐碎.我把这部分的知识点分成了五部分,各自是软件project的基础知识.开发管 ...
- JPush 初始化失败，直接按照官方文档的格式写的，portal上的包名肯定不会错，mainfest里面直接指定${applicationId}
错误日志: 11-27 09:59:19.670 26124-26124/? D/dalvikvm: Late-enabling CheckJNI 11-27 09:59:20.008 26124-2 ...
- 使用EL表达式正确情况下报错：javax.servlet.jsp cannot be resolved to a type
这个错误可能是服务器自带的servlet库未导入的原因.右键项目属性,转到Targeted Runtimes,选择一个服务器,例如Tomcat,单击应用,可能就可以解决.