javascript当中onblur和onfocus用法

最新推荐文章于 2025-06-06 09:17:29 发布
转载 最新推荐文章于 2025-06-06 09:17:29 发布 · 694 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
原文链接：https://blog.csdn.net/mark_to_win/article/details/88637180
标签
#javascript #javascript onblur #javascript  onfocus #javascript  onfocus
本文通过一个实例展示了如何使用onblur和onfocus事件来验证输入框中用户名的有效性。当用户离开输入框时，会触发onblur事件，检查用户名是否为空；当用户重新聚焦到输入框时，会清除之前显示的错误信息。

例 1.1 onblur和onfocus
onblur失去焦点和onfocus得到焦点事件。 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<SCRIPT LANGUAGE="JavaScript">
    <!--
    function check(a)
    {
        var username = a.value;
        if (username == "")
        {
            /*String.fontcolor() (Method)
    Encapsulates the string within an <FONT COLOR="..."> tag context.*/
            document.getElementById("error").innerHTML = "用户名不能为空！".fontcolor("red");
        }
    }
    function rese()
    {
        document.getElementById("error").innerHTML = "";
    }
    //-->
</SCRIPT>
</HEAD>
<BODY onload="document.getElementById('u').focus()">
we can not leave the following input blank.
用户名：<INPUT id="u" TYPE="text" NAME="" onblur="check(this)" onfocus="rese()"><span id="error"></span><BR>
</BODY>
</HTML>

更多请见：http://www.mark-to-win.com/tutorial/js_4_onbluronfocus.html

JavaScript中的onblur（失去焦点）应用
qiuqiule6的博客
02-16 6518
提示：onblur 相反事件为 onfocus 事件。ondblclick— 鼠标左键双击事件。onmouseover— 鼠标移入事件。onmouseout-- 鼠标移出事件。onmousemove— 鼠标移动事件。onmousedown— 鼠标按下事件。oninput---- 内容改变事件。onclick— 鼠标左键单击事件。onmouseup— 鼠标抬起事件。onkeydown— 键盘按下事件。onchange— 内容改变事件。onkeyup— 键盘抬起事件。onblur— 失去焦点事件。
JavaScript常用事件之onchange()事件、onblur()事件
weixin_51403997的博客
06-08 1万+
一、onchange()事件 1、功能：onchange 事件会在域的内容改变时发生,也可用于单选框与复选框改变后触发的事件。 2、语法： 3、实例:
JavaScript的onfocus与onblur用法
weixin_42232623的博客
05-21 1399
在做登录的时候，登录界面的文本框中会有一段文字，当鼠标点击文本框时，框内文字消失，当鼠标离开时，那行字又出现了，但当输入文本时那行字便不再显现，此特效是如何实现的呢？实现原理如下 效果如下: 点击用户名前: 点击用户名后 代码如下 <input type="text" name="username" value="请输入用户名" onfocus="this.value = '';" ...
js中常用的事件，onclick 单击事件、onblur 失去焦点事件、onchange改变事件、onmouseover鼠标进入事件、onmouseout鼠标移除事件、onsubmit提交事件
热门推荐
ghjzzhg的博客
01-16 7万+
onclick 单击事件 onblur 失去焦点事件 onchange 当对象或选中区的内容改变时触发。 onmouseover 当用户将鼠标指针移动到对象内时触发。 onmouseout 当用户将鼠标指针移出对象边界时触发。 onsubmit 当表单将要被提交时触发。 1、静态点击事件 script type="text/javascript"> // A标签的点击事
掌握JavaScript的onfocus与onblur事件监听
最新发布
weixin_36074800的博客
06-06 1388
onfocus事件是当元素获得焦点时触发的事件。通常，这意味着用户已经点击了该元素，或者在输入字段中开始输入文本。在网页设计中，获得焦点并不限于输入字段；其他可交互元素如链接、按钮、甚至自定义控件都可以通过JavaScript来触发onfocus事件。要触发onfocus事件，用户行为是关键。例如，用户点击一个输入框，或者使用Tab键在表单元素间切换，触发的都是onfocus事件。除了直接的用户交互，还可以通过脚本代码设置或取消元素的焦点，比如会让id为myInput的元素获得焦点。
js的onfocus与onblur的用法
Vince_Wang1的博客
01-06 2950
在我们登录或者注册的页面时常会注意到一个细节， 文本框中的 请输入用户名 在点击框的时候便会消失转换成闪烁光标，而鼠标挪开之后又会出现请输入用户名的字样，知道输入内容。 例: 点击时 输入后 实现代码: <input type=“text” value=“请输入用户名” οnfοcus=“if(value==‘请输入用户名’) {value=’ '}” οnblur=“if (val...
JavaScript中onblur事件
weixin_47511190的博客
07-12 2460
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function onblurfun(){ //console是控制台对象，是JavaScript语言提供，专门用来向 //浏览器的控制台打印输出，用于测试使用
JavaScript中的onBlur和onFouse事件的用法
JulyNight的博客
02-22 1642
onFouse 事件在对象获得焦点时发生。onBlur 事件会在对象失去焦点时发生。 可能这么说对于小萌新来说可能不懂，我翻一下，一般在输入框使用，当鼠标点击输入框就是获取焦点，这个时候就用onFouse。当我们完成对输入框内容的输入后，点击输入框外这个时候就是是去焦点，用onBlur。 举个栗子 JS代码： <script> function myFouse(x){ x.style.background="yellow"; } function myBlur(y){ y.style.bac
JavaScript (六) -- JavaScript 事件（常用事件的运用）
PUYALEI的博客
05-06 3094
常用事件（onload、onsubmit、onclick、ondblclick、onblur、onfocus、onchange）的运用。
JavaScript中的onblur和onchange是两个常用的事件处理程序，用于处理用户与表单元素交互的情况
CyberOI的博客
10-02 464
onblur和onchange事件都是处理表单元素交互的事件处理程序。onblur事件在元素失去焦点时触发，适用于需要在用户离开输入字段或元素后执行验证或其他操作的情况。而onchange事件在元素的值发生改变并且失去焦点时触发，适用于需要在用户对表单元素进行更改后立即触发事件的情况。与onblur事件不同，onchange事件要求用户在更改元素的值之后才触发，而不仅仅是离开元素。JavaScript中的onblur和onchange是两个常用的事件处理程序，用于处理用户与表单元素交互的情况。
onblur失焦事件
B000M的博客
05-27 7010
对于onblur 事件的小记 定义和用法: onblur 事件发生在对象失去焦点时。 onblur 事件最常与表单验证代码一起使用（例如，当用户离开表单字段时）。 提示： onblur 事件与 onfocus 事件相反。 提示： onblur 事件类似于 onfocusout 事件。主要区别在于 onblur 事件不会冒泡。因此，如果您想找出元素或其子元素是否失去焦点，可以使用 onfocusout 事件。但是，您可以通过使用 onblur 事件的 addEventListener() 方法的 useCap
JavaScript --onfocus,onblur实现简单注册密码案例
weixin_50731688的博客
03-22 441
/2.判断用户是否可以写【重复密码】//2.获得【重复密码】中value。//1.获得【密码】中value。//1.获得【密码】中value。//让当前标签获得光标。"两次密码内容不一致"
JavaScript中，onblur()和onmouseout()的区别
2201_75401433的博客
06-18 436
onblur事件主要用于处理焦点相关的操作，而onmouseout事件主要用于处理鼠标交互相关的操作。两者虽然在某些情况下可能会有重叠的应用场景，但通常还是根据具体的需求选择使用哪一个事件。
JS中onblur总结
qq_30359369的博客
08-05 7480
JS中onblur总结 #第一种方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text"id="...
JS的onblur
思维小刀
10-12 3674
目的：onblur 属性在元素失去焦点时触发 代码：一离开input就进行大写输入字符串 <!DOCTYPE html> <html> <head> <script> function upperCase() { var x=document.getElementById("fname").value document.getElementBy...
表单测试以及校验
qq_59746711的博客
07-10 730
表单的测试以及正则表达式对表单的优化
JavaScript 事件 onblur 与 onfocus 区别
除除的博客
11-01 3987
一、onblur 1.1 说明 onblur属性在元素失去焦点时触发，onblur常用于表单验证代码（例如用户离开表单字段）。 1.2 示例 <input type="text" name="" id="" onblur="javascript:alert('onblur');"> 二、onfocus 2.1 说明 onfocus属性在元素获得焦点时触发，onfocus常用于、以及。 2.2 示例 <!--点击后因为不断onfocus会不断弹出，可以直接关闭浏览器标签页终止-->
HTML onfocus （获得焦点）和 onblur （失去焦点）
ssisse的博客
09-07 4万+
HTML onfocus 事件属性 定义和用法 onfocus 属性在元素获得焦点时触发。 onfocus 常用于 、 以及 . 提示：onfocus 属性与 onblur 属性相反。 注释：onfocus 属性不适用于以下元素：、、、、、、、、、 或 。 实例 当输入字段获得焦点时触发函数。此函数改变输入字段的背景色 function s
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值