事件基础一

最新推荐文章于 2022-11-12 22:35:00 发布

Mr Gong

最新推荐文章于 2022-11-12 22:35:00 发布

阅读量320

点赞数

分类专栏： DOM JS

本文链接：https://blog.csdn.net/GYZ_Code/article/details/76797475

版权

DOM 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

焦点事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点事件</title>
</head>
<body>

    <input type="text" name="" placeholder="请输入内容">
    <input type="text" name="" >
    <input type="text" name="">
    <input type="button" name="" value="按钮">

<script type="text/javascript">

/*
    焦点 : 使浏览器能够区分用户输入的对象，当一个元素有焦点的时候，那么他就可以接收用户的输入

    我们可以通过一些方式给元素设置焦点
        1.点击
        2.tab键
        3.js 通过焦点方法来设置

    不是所有元素都能够接收焦点的.能够响应用户操作的元素才有焦点

*/
    var oInput=document.getElementsByTagName('input')[0];

    var oInput1=document.getElementsByTagName('input')[1];


    //onfoucs  当元素获取到焦点的时候触发
    oInput.onfocus=function (){

        if (this.placeholder=='请输入内容') {

            this.placeholder='';
        }   

    }

    //onblur  当元素失去焦点的时候触发
    oInput.onblur=function (){

        if (this.value=='') {

            this.placeholder='请输入内容';
        }   

    }
</script>

</body>
</html>

焦点方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点方法</title>
</head>
<body> 

    <input type="text" name="">
    <input type="button" name="" value="搜索">
    <input type="text" name="">
    <input type="button" name="" value="全选">
    <div>aaaaaaaaaaaaaa</div>

<script type="text/javascript">

    var oInput1=document.getElementsByTagName('input')[0];
    var oInput2=document.getElementsByTagName('input')[2];
    var oBtn=document.getElementsByTagName('input')[3];

/*  
    obj.focus()   给指定元素设置焦点

    obj.blur()    取消元素的焦点

    obj.select()  选择指定元素的文本内容

    能操作的都是可交互性的元素
*/

    oInput1.focus();//打开页面，oInput1就获得焦点


    oBtn.onclick=function (){

        oInput2.select();

    }

</script>

</body>
</html>