js失去焦点事件onblur - 腾讯云开发者社区

文章/答案/技术大牛

发布

【Web APIs】JavaScript 操作元素 ⑧ ( DOM 操作元素案例 | 获取焦点 onfocus 事件 | 失去焦点 onblur 事件 | 获取设置 HTML 页面背景颜色 )

addEventListener document.getElementById("myInput").addEventListener("focus", function() { // 执行相关操作 }); 2、失去焦点事件...- onblur 事件在 JavaScript 中 , 当 DOM 元素失去焦点时 , 该 DOM 元素上绑定的 onblur 事件被触发 ; 如 : 用户从输入框移动到页面的其他部分或...按下 Tab 键移动焦点时 , 该事件会被触发 ; 绑定 onblur 事件的方法 : 设置 onblur 属性 : 可以通过 DOM 操作 , 给元素添加 onblur 属性 , 来指定当焦点集中在元素上时要执行的...注册失去焦点事件 onblur text.onblur = function() { if (this.value === '') {...this.value = '请输入搜索内容'; } // 失去焦点后 , 颜色变为灰色 this.style.color = 'gray

2.5K1 0

jquery 绑定事件 - blur() 失去焦点 - focus() 获取焦点

事件函数列表 blur() 元素失去焦点 focus() 元素获得焦点 click() 鼠标单击 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发）...mouseenter() 鼠标进入（进入子元素不触发） mouseleave() 鼠标离开（离开子元素不触发） hover() 同时为mouseenter和mouseleave事件指定处理函数 ready...() DOM加载完成 resize() 浏览器窗口的大小发生改变 scroll() 滚动条的位置发生变化 submit() 用户递交表单编写一个form表单，用来演示输入框获取焦点和失去焦点的示例 ?...blur() 元素失去焦点使用blur()失去焦点这个方法一般会结合获取文本框内容的函数一起使用，如下： ? 当获取到文本框内的值之后，就可以对其进行正则验证或者其他方式的校验。... js

15.2K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

在js(jquery)中获得文本框焦点和失去焦点的方法

先来看javascript的直接写在了input上代码如下: onBlur="if(this.value...this.value=="") this.value="******";" onFocus="if(this.value=="******") this.value="";"> jquery实现方法对于元素的焦点事件...，我们可以使用jQuery的焦点函数focus(),blur()。...focus()：得到焦点时使用，和javascript中的onfocus使用方法相同。...如： $("p").focus(); 或$("p").focus(fn) blur()：失去焦点时使用，和onblur一样。

15.3K3 0

cssjshtml vue.js lazy在失去焦点时改变

在失去焦点或者回车时改变。 {{ message }} js.../vue.min.js"> var app=new Vue({ el:'#app', data:{ message

4.6K2 0

事件绑定(onclick,onfocus,onblur)

事件绑定(onclick,onfocus,onblur) 常用绑定方式方式一：通过 HTML标签中的事件属性进行绑定在HTML标签中加入，onclick属性，并在后面加上需要的方法。...除了onclick，还有其他常用的事件。...事件属性名说明 onclick 鼠标单击事件 onblur 元素失去焦点 onfocus 元素获得焦点 onload 某个页面或图像被完成加载 onsubmit 当表单提交时触发该事件 onmouseover...鼠标被移到某元素之上 onmouseout 鼠标从某元素移开小案例讲解 onfocus and onblur onfocus 获得焦点事件。...当点击了输入框后，输入框就获得了焦点。然后输入框的背景颜色变成粉色。 onblur 失去焦点事件。当失去输入框的焦点的时候，输入框的背景颜色消失，然后里面文字变成大写。演示代码 <!

2.1K1 0

【说站】js中有哪些焦点事件

js中有哪些焦点事件 1、blur当元素失去焦点时触发。事件不会冒泡，所有浏览器都支持。 2、focus当元素获得焦点时触发。事件不会冒泡，所有浏览器都支持。...实例 // 焦点事件：模拟输入框的placeholder功能 var oInput1 = document.getElementById("input1"); oInput1....onfocus = function () { oInput1.value = ""; }; oInput1.onblur = function () { oInput1....value = "请输入内容"; }; //oInput1.select(); 以上就是js中焦点事件的介绍，希望对大家有所帮助。...更多js学习指路：js教程推荐操作环境：windows7系统、jquery3.2.1版本，DELL G3电脑。

8.2K3 0

焦点事件

焦点详解：使浏览器能够区分用户输入的对象，当一个元素有焦点的时候就可以接收用户的输入 1.点击 2.tab 3.js 注意：不是所有元素都能接受焦点，能够响应用户操作的元素才有焦点 <input...this.value=='请输入内容'){ this.value=''; } }; text.onblur...} }; }; 不需要用户点击，直接获取焦点...obj.focus();给指定的元素设置焦点 obj.blur();取消指定元素的焦点 obj.select()选择指定元素里面的文本内容（只能是用户能够输入的内容，div p里面不能复制，

4.3K1 0

第26天：js-$id函数、焦点事件

所有自定义函数默认没有返回值 return后面不要换行 var a=10,b=20,c=30; ++a; a++; e=++a+(++b)+(c++)+a++; alert(e);//77 二、获得焦点...、失去焦点事件获得焦点：onfocus 失去焦点：onblur 案例： 1 <!

4.5K1 0

获取焦点后隐藏提示内容的输入框

逻辑 // 获取元素 var text = document.querySelector('input'); // 注册事件获得焦点事件...失去焦点事件 onblur text.onblur = function() { if (this.value === '') {...this.value = '内容'; } // 失去焦点之后把颜色变化回去 this.style.color = '#999';...失去焦点事件 onblur text.onblur = function() { if (this.value === '') {...this.value = '内容'; } // 失去焦点之后把颜色变化回去 this.style.color = '#999';

3.5K1 0

React技巧之输入onFocus和onBlur事件

] 正文从这开始~ 在React中，使用React.FocusEvent 类型来类型声明onFocus和onBlur事件。...FocusEvent接口用于onFocus和onBlur事件。...>，因为FocusEvent类型用于React中的onFocus和onBlur事件。...然而，我们在输入事件时可以更具体一些。找出事件类型的最简单方法是内联编写事件处理，并将鼠标悬停在函数中的event参数上。...注意，你可以使用这种方法获取所有事件的类型，而不仅仅是onFocus和 onBlur事件。只要你内联编写事件处理函数，并将鼠标悬停在event参数上，TypeScript就能推断出事件的类型。

2.6K2 0

JS如何为表单聚焦控件设置醒目的样式

/26-set-form-style/) 原生Js实现如下是简易的示例代码,要想实现这一个效果,必须要知道onfocus和onblur,前者是聚焦的回调事件,而后者是控件失去焦点的回调在一个网页里,...永远都只能有一个控件获得焦点,因此需要遍历所有的控件,为它们定义相同的onfocus以及onblur的逻辑当控件获得焦点时,为它设置独特的边框样式,否则就恢复原有的边框样式 function init...= function() { // 失去焦点的回调 this.style.border = ''; // 恢复原有边框样式 } } } init... Vue版本实现在vue里面是直接在元素上绑定focus与blur事件进行实现的...还是Vue版本实现,都需要使用onblur(input框失去焦点)与onfocus(input框聚焦焦点),实现的核心原理都是相似的,只是在框架里去控制,表现形式有些不一样

9.1K5 0

JS事件相关知识点整理

JS事件相关知识点整理 JS事件的驱动机制常见JS事件点击事件---onclick 焦点事件获取焦点事件---onfocus 失去焦点事件----onblur 域内容改变事件---onchange...JS事件的两种绑定方式元素事件句柄绑定优缺点 DOM绑定方式示例演示优缺点 ---- JS事件的驱动机制 ---- 常见JS事件点击事件—onclick 点击事件，由鼠标或者热键点击元素组件时触发... ---- 失去焦点事件...----onblur 失去焦点事件: 元素组件失去焦点时触发代码演示 function callPolice() { alert("失去焦点了

2.6K2 0

c# winform 窗体失去焦点关闭（钩子实现）

static extern int CallNextHookEx(int idHook, int nCode, Int32 wParam, IntPtr lParam); // 全局的鼠标事件...钩子回调函数 public delegate int HookProc(int nCode, Int32 wParam, IntPtr lParam); // 声明鼠标钩子事件类型

3.8K2 0

【UI】 elementui input输入框自动获取失去焦点

实例名称 <el-input ref="input" v-model="input" placeholder="请输入搜索内容" /> 获取焦点...$refs.input.focus() }) 失去焦点 this.$nextTick(() => { this.$refs.input.blur() }) 实现效果

4381 0

js代码与html代码分离示例

方式一：使用文本框的onblur事件(失去焦点事件) // function ckName() { // // 通过标签名获取元素节点对象 // ... // onload 加载完毕的事件，等到页面加载完毕后再执行onload事件所指向的函数。 ...-- 文本框的onblur事件(失去焦点事件) --> 事件不写在标签上。...即js代码与html代码分离。

5K2 1

dom啦17 焦点事件

id=""> let oInput = document.querySelector("input"); // 1.监听input获取焦点...oInput.onfocus=function() { console.log("获取到了焦点"); } // 2.监听input失去焦点 oInput.onblur=function...() { console.log("失去了焦点"); } // 3.监听input内容改变 oInput.onchange=function() { console.log...(this.value); } // 在IE9以下, 如果想时时的获取到用户修改之后的数据, 可以通过onpropertychange事件来实现 oInput.oninput...=function() // oninput事件可以时时获取到用户修改之后的数据, 只要用户修改了数据就会调用(执行) { console.log(this.value

1.8K2 0

Textarea输入框失去焦点时隐藏手机键盘

后面发现这种情部只是在iphone下才会产生，原来在点击空白的document处textarea并不能失去焦点，解决方案如下： //判断是否为iphone var isIPHONE = navigator.userAgent.toUpperCase...= -1; //失去焦点的方法 function ObjOnBlur(id, time) { //判断传参是否正确 if (typeof id !...= obj) { //延时隐藏 setTimeout(function () { // textarea会失去焦点...obj.blur(); // document移除ontouchend事件 document.removeEventListener('touchend...documentTouchend, false); }, time); } }; //如果标签存在 if (obj) { //添加监听事件

3.8K1 0

js焦点轮播图

汇集网上焦点轮播图的实现方式，自己试了下，不过鼠标悬浮停止动画和鼠标离开动画播放好像没生效，不太明白，最后两行代码中，为什么可以直接写stop和play。不用加括号调用函数么？求懂的大神指点！...所用知识点： 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法(可以用js实现一个假图的制作。...animate(600); showButton(); } // 通过循环为按钮添加点击事件...animate(600); showButton(); } // 通过循环为按钮添加点击事件

17.9K13 0

JavaWeb day3 JavaScript入门

下面就给大家列举一些比较常用的事件属性事件属性名说明 onclick 鼠标单击事件 onblur 元素失去焦点 onfocus 元素获得焦点 onload 某个页面或图像被完成加载 onsubmit...如下图，当点击了输入框后，输入框就获得了焦点。而下图示例是当获取焦点后会更改输入框的背景颜色。 onblur 失去焦点事件。...验证手机号是否符合规则 //1.1 获取手机号的输入框 var telInput = document.getElementById("tel"); //1.2 绑定onblur事件失去焦点 telInput.onblur...验证手机号是否符合规则 //1.1 获取手机号的输入框 var telInput = document.getElementById("tel"); //1.2 绑定onblur事件失去焦点 telInput.onblur...事件失去焦点 telInput.onblur = checkTel; function checkTel() { //1.3 获取用户输入的手机号 var

8.3K2 0

JavaWeb day3 JavsScript 入门

下面就给大家列举一些比较常用的事件属性事件属性名说明 onclick 鼠标单击事件 onblur 元素失去焦点...如下图，当点击了输入框后，输入框就获得了焦点。而下图示例是当获取焦点后会更改输入框的背景颜色。图片 onblur 失去焦点事件。...验证手机号是否符合规则 //1.1 获取手机号的输入框 var telInput = document.getElementById("tel"); //1.2 绑定onblur事件失去焦点 telInput.onblur...验证手机号是否符合规则 //1.1 获取手机号的输入框 var telInput = document.getElementById("tel"); //1.2 绑定onblur事件失去焦点 telInput.onblur...事件失去焦点 telInput.onblur = checkTel; function checkTel() { //1.3 获取用户输入的手机号 var

8.6K1 0

点击加载更多

【Web APIs】JavaScript 操作元素 ⑧ ( DOM 操作元素案例 | 获取焦点 onfocus 事件 | 失去焦点 onblur 事件 | 获取设置 HTML 页面背景颜色 )

jquery 绑定事件 - blur() 失去焦点 - focus() 获取焦点

在js(jquery)中获得文本框焦点和失去焦点的方法

cssjshtml vue.js lazy在失去焦点时改变

事件绑定(onclick,onfocus,onblur)

【说站】js中有哪些焦点事件

焦点事件

第26天：js-$id函数、焦点事件

获取焦点后隐藏提示内容的输入框

React技巧之输入onFocus和onBlur事件

JS如何为表单聚焦控件设置醒目的样式

JS事件相关知识点整理

c# winform 窗体失去焦点关闭（钩子实现）

【UI】 elementui input输入框自动获取失去焦点

js代码与html代码分离示例

dom啦17 焦点事件

Textarea输入框失去焦点时隐藏手机键盘

js焦点轮播图

JavaWeb day3 JavaScript入门

JavaWeb day3 JavsScript 入门

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐