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 ...
随机推荐
- 免XML的SpringMVC配置
Servlet 3.0以后,新增了一些注解,使得web.xml可以省略掉.这样配合Spring的JavaConfig就可以实现免xml的项目配置,这里简单搭建一个免XML的SpringMVC.Spri ...
- 利用python进行数据分析－－（阅读笔记一）
以此记录阅读和学习<利用Python进行数据分析>这本书中的觉得重要的点! 第一章:准备工作 1.一组新闻文章可以被处理为一张词频表,这张词频表可以用于情感分析. 2.大多数软件是由两部分 ...
- cogs——1578. 次小生成树初级练习题
1578. 次小生成树初级练习题 ☆ 输入文件:mst2.in 输出文件:mst2.out 简单对比时间限制:1 s 内存限制:256 MB [题目描述] 求严格次小生成树 [输入格式 ...
- - > 动规讲解基础讲解四——最大子段和问题
给出一个整数数组a(正负数都有),如何找出一个连续子数组(可以一个都不取,那么结果为0),使得其中的和最大? 例如:-2,11,-4,13,-5,-2,和最大的子段为:11,-4,13.和为20. ...
- ScrollView双击图片定点放大
直接先说原理吧--原理:利用了scrollview的回调函数(如下)以及scrollview自己内部的一些缩放规则(其实我也还没弄清楚具体scrollview干了什么事),只是知道了它可以怎么做-_- ...
- [Phonegap+Sencha Touch] 移动开发77 Cordova Hot Code Push插件实现自己主动更新App的Web内容
原文地址:http://blog.csdn.net/lovelyelfpop/article/details/50848524 插件地址:https://github.com/nordnet/cord ...
- CentOS6.5 64位站点压力測试工具webbench
在Apache中有自带的ab命令能够測试服务的压力,而nginx没有自带的命令,必需要採用第三方软件来測试.今天就简介一下webbench对nginx的压力測试,压力測试是对系统管理员和运维人员必须的 ...
- 自己动手写reg注册表文件
自己动手写reg注册表文件 2015-01-12 20:23 1161人阅读 评论(1) 收藏 举报 分类: 玩转Windows应用层编程(12) 版权声明:本文为博主原创文章,未经博主允许不得转 ...
- linux下使用script和scriptreplay对命令行操作进行录像
转自:linux下用script和scriptreplay对命令行操作录像 在Linux中可以使用script命令来记录命令行的操作过程,并使用scriptreplay命令对命令操作进行回放,操作步骤 ...
- Selenium-一个用于Web应用程序测试的工具
Selenium.pptx