Javascript特效：输入框焦点判断

知识点

两种添加事件的语法区别：事件名称是不一样的

input.onfocus = function (ev1) {this.style.width = '600px';this.style.height = '200px';this.style.outline = 'none';this.style.fontSize = '50px';
};
input.addEventListener('focus',function (evt) {this.style.width = '600px';this.style.height = '200px';this.style.outline = 'none';this.style.fontSize = '50px';
});

效果

初始效果

点击输入框，获得焦点

点击输入框外部，失去焦点

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box"><span>姓名</span><label><input type="text" placeholder="请输入姓名"></label>
</div>
<script>window.onload = function (ev) {var input = document.getElementsByTagName('input')[0];// 1. 获得焦点input.onfocus = function (ev1) {this.style.width = '600px';this.style.height = '200px';this.style.outline = 'none';this.style.fontSize = '50px';};// 2. 失去焦点input.addEventListener('blur',function (evt) {this.style.border = '5px solid red';this.style.color = 'yellow';})}
</script>
</body>
</html>

Javascript特效：输入框焦点判断相关推荐

11种控制内容展示的JavaScript特效和技巧
交付信息结构是一个交互式用户界面所需要完成的首要任务.更直观的布局结构设计,能使用户更好的理解内容. 不管你想要介绍的是什么样的内容,你都可以以更加互动和更加适应的方式去呈现现它.本文里面,我们为你收 ...
Javascript特效之监听键盘按键
Javascript特效之监听键盘按键我们都知道很多软件都有快捷键可以使用,今天我们来看看怎么实现网页的快捷键功能. 效果图: 当我们按下ctrl和enter时,网页会弹出对话框. 实现思路: 其实 ...
java script特效_通过JavaScript特效控制内容展示的11种方法
通过JavaScript特效控制内容展示的11种方法交互信息结构是一个交互式用户界面所需要完成的首要任务.更直观的布局结构设计,能使用户更好的理解内容.以下是百分网小编搜索整理的通过JavaScri ...
前程无忧招聘网站特效制作(JavaScript特效)
招聘网站特效制作,实现如下功能: 1.网站首页 2.新用户注册 3.用户登录 4.简历管理:信息填写 5.职位搜索 6.招聘公司页面查看模板制作:网站底部做成模板,网站其他页面调用模板,模板用DIV ...
JavaScript 专题之如何判断两个对象相等
JavaScript 专题系列第十二篇,讲解如何判断两个参数是否相等前言虽然标题写的是如何判断两个对象相等,但本篇我们不仅仅判断两个对象相等,实际上,我们要做到的是如何判断两个参数相等,而这必然会 ...
Moo.fx 超级轻量级的 javascript 特效库
Moo.fx是一个超级轻量级的 javascript 特效库(7k),能够与 prototype.js 或mootools 框架一起使用.它非常快.易于使用.跨浏览器.符合标准,提供控制和修改任何 ...
原生javascript淡入淡出焦点图 + Jquery实现方法
淡入淡出焦点图效果类这里是缓动焦点图链接: JavaScript 缓动焦点图实现的几种写法封装 + 函数式 + JQuery 焦点图实现思路: 原生JS的类的调用方式: var slider1 ...
深入理解javascript中的焦点管理
前面的话焦点作为javascript中的一个重要功能,基本上和页面交互都离不开焦点.但却少有人对焦点管理系统地做总结归纳.本文就javascript中的焦点管理作详细介绍焦点元素到底哪些元素可以 ...
java中typeof_深入剖析JavaScript中的数据类型判断(typeof instanceof prototype.constructor)...
关于JavaScript中的类型判断,我想大部分JavaScripter 都很清楚 typeof 和 instanceof,却很少有人知道 constructor,以及constructor与前面二 ...
HTML5 和 JavaScript 特效
这篇文章向大家展示8个惊艳的 HTML5 和 JavaScript 特效.作为下一代网页语言,HTML5 拥有很多让人期待已久的新特性,越来越多的开发人员开始使用 HTML5 来制作各种交互性强.效果 ...

Javascript特效：输入框焦点判断

知识点

效果

代码

Javascript特效：输入框焦点判断相关推荐

最新文章

热门文章