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 ...
随机推荐
- sql自增长和占位符？"相矛盾"的问题
1.对于sql server数据当数据被定义为自增长时,插入,无法将那个位置用字符占位,我们可以使用部分插入的方法来做. insert into users (username,email,grad ...
- 在Myeclipse中拷贝一个web项目，但是tomcat文件夹中没有更新，需要进行修改才能更新。
1.在Myeclipse中拷贝一个web项目,但是tocat文件夹中没有更新,需要进行修改才能更新. 2.方法:右键这个工程,然后Properties->MyEclipse->Projec ...
- WINDOWS下调用GetTokenInformation的奇怪之处--两次调用
就是用getLastErr可以得到错误号,同时,会将需要的长度写到参数里,再进行第二次调用,以此来节约内存空间. 神奇的长见识了. 相关说法如下: ====================== The ...
- [bzoj4987]Tree_树形dp
Tree bzoj-4987 题目大意:给定一颗n个点的有边权的树,选出k个点,使得:$\sum\limits_{i=1}^{k-1}dis_idis_j$最小. 注释:$1\le n\le 3000 ...
- 复习es6-解构赋值+字符串的扩展
1. 数组的解构赋值 从数组中获得变量的值,给对应的声明变量赋值,,有次序和对应位置赋值 解构赋值的时候右边必须可以遍历 解构赋值可以使用默认值 惰性求值,当赋值时候为undefined时候,默认是个 ...
- [Vue-rx] Switch to a Function which Creates Observables with Vue.js and Rxjs
Wrapping the creation of an Observable inside of a Function allows you delay the creation of the Obs ...
- android从数据库中取音乐数据
android从手机数据库中取音乐数据 直接贴代码 public void getMp3(){ list = new ArrayList<>(); Cursor mAudioCursor ...
- Ubuntu12.04.3LTS安装Oracle Java 7
今天在ubuntu 12.04 LTS 上安装Matlab时总是出错,显示拷贝jar包(cp "xx.jar")出现错误,在网上搜索了一下发现原来是没有安装java.自己打算安装o ...
- CentOS-6.4-DVD系统中安装Oracle-11.2.0.4
完整版见https://jadyer.github.io/2014/05/18/centos-install-oracle/ /** * CentOS-6.4-DVD系统中安装Oracle-11.2. ...
- Robot Framework 搭建和RIDE(GUI) 的环境
在windows x64的环境上进行安装,集成Selenium2和AutoIt的libraries,以下安装步骤在win 7,win 8.1,win 10, win 2012 R2上测试通过 1. 下 ...