文章目录

1️⃣ 表单焦点处理
- 1.1 当成焦点时（focus）
- 1.2 当失去焦点时（blur）
2️⃣ 容器焦点处理
- 2.1 根据ID处理焦点
- 2.2 根据class处理焦点
优质资源分享

js焦点处理的几种方式,表单焦点处理和容器焦点处理，常用于文本框获取焦点时调用函数和失去时调用函数，div点击弹出层，当失去焦点时候隐藏层等问题处理。javascript焦点处理，很好的解决了此类问题。

1️⃣ 表单焦点处理

这里拿文本框获取焦点时，背景变色，失去焦点时回复原色，并判断是否输入正确举例。

1.1 当成焦点时（focus）

onfocus 当成焦点时，改变背景颜色，文字颜色

<input class="input1" type="text" id="t1" onfocus="getjd();" placeholder="xcLeigh" />

1.2 当失去焦点时（blur）

onblur 当失去焦点时，回复背景颜色和文字颜色

<input class="input1" type="text" id="t1"  onblur="sqjd();" placeholder="xcLeigh" />

效果

源码，直接复制使用

<html>
<head>
<title>xcLeigh博客</title>
<style type="text/css">.input1{border:1px solid orange;padding:6px;border-radius:10px;color:blue;}.input2{background-color:orange;padding:6px;border-radius:10px;color:red;}
</style>
<script type="text/javascript">function sqjd(){document.getElementById("t1").className ="input1";}function getjd(){document.getElementById("t1").className ="input2";}
</script>
</head>
<body>
<div style="padding:120px;"><input class="input1" type="text" id="t1" onfocus="getjd();" onblur="sqjd();" placeholder="xcLeigh" />
</div>
</body>
</html>

2️⃣ 容器焦点处理

这里以单击按钮出现菜单，失去焦点时候隐藏菜单举例。

2.1 根据ID处理焦点

id为rep1

if (target.closest("#rep1").length == 0) {//点击id为parentId之外的地方触发document.getElementById("dropdiv").style.display = "none";
}

2.2 根据class处理焦点

class为testclass

if (target.closest(".testclass").length == 0) {//点击id为parentId之外的地方触发document.getElementById("dropdiv").style.display = "none";
}

效果图

代码示例，直接复制使用

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<title>xcLeigh博客</title>
<style type="text/css">.dropdiv {text-align:center;position:absolute;border:1px solid #175E77;background-color:#1C2550;border-radius:10px;z-index:999;width:180px;margin-top:10px;color:white;padding-top:6px;padding-bottom:6px;display:none;}.dropdivmenu {padding:10px;cursor:pointer;}.dropdivmenu:hover {color:#68d8ff;background: rgba(255, 255, 255, 0.1);}
</style>
<script type="text/javascript" src="http://www.htmleaf.com/js/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">function showReport() {document.getElementById("dropdiv").style.display = "block";};window.onload=function(){$(document).bind("click", function (e) {var target = $(e.target);//if (target.closest("#rep1").length == 0) {//点击id为parentId之外的地方触发// document.getElementById("dropdiv").style.display = "none";//}if (target.closest(".testclass").length == 0) {//点击id为parentId之外的地方触发document.getElementById("dropdiv").style.display = "none";}});};function reportData(url) {window.open(url, '_blank');};</script>
</head>
<body>
<div style="padding:120px;"><div><span id="rep1" class="testclass" onclick="showReport()" style="border:1px solid green; color:white; cursor:pointer; background-color:#175E77;padding:6px 10px;border-radius:10px;">xcLeigh</span></div><div id="dropdiv" class="dropdiv"><div class="dropdivmenu" onclick="reportData('https://blog.csdn.net/weixin_43151418/article/details/125642161');">html好看的邀请函</div><div class="dropdivmenu" onclick="reportData('https://blog.csdn.net/weixin_43151418/article/details/124746163');">html好看的个人简历</div><div class="dropdivmenu" onclick="reportData('https://blog.csdn.net/weixin_43151418/article/details/126099643');">html好看的爱情表白</div></div>
</div>
</body>
</html>

优质资源分享

js焦点处理的几种方式相关推荐

JS数组遍历的几种方式
JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比第一种:普通for循环代 ...
js声明变量的三种方式
JS 声明变量的三种方式 (1)使用变量步骤:a.声明-->b.赋值-->3.调用正确用法: <script type="text/javascript"> ...
[译]使用Webpack提高Vue.js应用程序的4种方式
[译]使用Webpack提高Vue.js应用程序的4种方式原文地址 Webpack是开发Vue.js单页应用程序的重要工具.通过管理复杂的构建步骤,您可以更轻松地开发工作流程,并优化应用程序的大 ...
java的如何创建js_[Java教程]JS创建事件的三种方式（实例）
[Java教程]JS创建事件的三种方式(实例) 0 2016-05-11 14:00:16 1.普通的定义方式 οnclick="Sfont=prompt('请在文本框中输入红色','红色' ...
js获取时间戳的几种方式、时间转时间戳
js获取时间戳的几种方式.时间转时间戳前言这两个方法的返回值都是 1970/1/1 午夜距离该日期时间的毫秒数如何使用下面的例子中,我们将取得从 1970/01/01 到 2017/03/19 ...
js 复制文本的四种方式
一.总结一句话总结:js文本复制主流方法:document的execCommand方法二.js 复制文本的四种方式纯转载复制,非原创原地址:http://www.cnblogs.com/xh ...
Js中自定义对象四种方式
Js中自定义对象四种方式 1 类似JAVA有参构造方式: 1.定义对象: function 对象(属性[age]){追加属性:如(this.age = age)[this代表当前对象的地址值的引用]追 ...
(转)js实现继承的5种方式
js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式 1.使用对象冒充实现继承(该种实 ...
php变量和js变量的区别吗,JS声明变量的3种方式和区别
JavaScript 是弱类型语言,可以不需要声明变量而直接使用.这样虽然简单但不易发现变量名方面的错误,所以不建议这样做.通常的做法是在使用 JavaScript 变量前先声明变量.目前,JavaS ...

js焦点处理的几种方式

文章目录

1️⃣ 表单焦点处理

1.1 当成焦点时（focus）

1.2 当失去焦点时（blur）

2️⃣ 容器焦点处理

2.1 根据ID处理焦点

2.2 根据class处理焦点

优质资源分享

js焦点处理的几种方式相关推荐

最新文章

热门文章