• 技术文章 >web前端 >前端问答

    javascript怎么判断元素是否有焦点

    长期闲置长期闲置2022-03-10 12:11:34原创228

    在JavaScript中,可用onfocus()和onblur()事件判断元素是否有焦点,onfocus事件在元素获取焦点时发生,onblur事件在元素失去焦点时发生,语法为“<element onfocus="Function()">”。

    本教程操作环境:windows10系统、javascript1.8.5版、Dell G3电脑。

    javascript怎么判断元素是否有焦点

    onfocus 事件在对象获得焦点时发生。

    Onfocus 通常用于 <input>, <select>, 和<a>.

    提示: onfocus 事件的相反事件为 onblur 事件。

    语法

    HTML 中:

    <element onfocus="SomeJavaScriptCode">

    JavaScript 中:

    object.onfocus=function(){SomeJavaScriptCode}

    JavaScript 中, 使用 addEventListener() 方法:

    object.addEventListener("focus", myScript);

    onblur 事件会在对象失去焦点时发生。

    Onblur 经常用于Javascript验证代码,一般用于表单输入框。

    提示:onblur 相反事件为 onfocus 事件 。

    语法

    HTML 中:

    <element onblur="SomeJavaScriptCode">

    JavaScript 中:

    object.onblur=function(){SomeJavaScriptCode};

    示例如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    function Function(){
    document.getElementById('tip').innerHTML='元素失去焦点了';
    }
    function myFunction(x){
    document.getElementById('tip').innerHTML='元素获取焦点了';
    }
    </script>
    </head>
    <body>
    判断焦点示例: <input type="text" onfocus="myFunction(this)" onblur="Function()">
    <p id="tip" style="color:red;"></p>
    </body>
    </html>

    输出结果:

    +1.gif

    相关推荐:javascript学习教程

    以上就是javascript怎么判断元素是否有焦点的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:javascript
    上一篇:es6中三个点是什么意思 下一篇:javascript的方法名区分大小写吗
    千万级数据并发解决方案

    相关文章推荐

    • JavaScript中#fff是什么颜色• javascript中数字占多少位bit• 一起来聊聊JavaScript函数柯里化• 实例图文详解在JavaScript中实现队列• JavaScript什么是事件流
    1/1

    PHP中文网