精华内容
参与话题
问答
  • Javascript基础(四):获得焦点和失去焦点事件

    万次阅读 多人点赞 2017-05-06 19:13:55
    1.获取ID的函数在说获取焦点和失去焦点事件之前,先说说封装获取ID的函数。一般在实际操作中,会经常用到提取某个元素的ID,如果每条都列,想必非常麻烦。一般如果有很多ID需要提取的情况基本都用提取ID的函数。 ...

    1.获取ID的函数

    在说获取焦点和失去焦点事件之前,先说说封装获取ID的函数。一般在实际操作中,会经常用到提取某个元素的ID,如果每条都列,想必非常麻烦。一般如果有很多ID需要提取的情况基本都用提取ID的函数。
    获取ID的函数如下:

       function $(id) {
    //    $符号一般用作获取id的函数名,有时候也有人用$id作为函数名。在这里我们只需要获取一个变量。
            return document.getElementById(id);
        }

    示例:
    CSS代码:

    <style>
        div{
            float: left;
            width: 110px;
            height: 110px;
            background-color: pink;
            margin: 20px;
        }
    </style>
    

    HTML和JS代码:

    <!--实战中,可能遇到需要获取超级多id的案例,如果都是一个一个来获取会影响效率,所以我们可以封装一个函数,专门用来获取id-->
    <div id="demo"></div>
    <div id="test"></div>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
    <div id="fore"></div>
    <div id="five"></div>
    <div id="six"></div>
    <script>
        function $(id) {
            return document.getElementById(id);
        }
       $("demo").style.backgroundColor = "green";
       //调用方法
       $("test").style.backgroundColor = "blue";
       $("one").style.backgroundColor = "orange";
       $("two").style.backgroundColor = "red";
       $("three").style.backgroundColor = "purple";
       $("fore").style.backgroundColor = "#f6e71f";
       $("five").style.backgroundColor = "#5153ff";
       $("six").style.backgroundColor = "#ff1496";
    // 调用函数,并直接修改盒子的背景颜色
    </script>

    效果:

    这里写图片描述

    2.获取焦点和失去焦点事件

    1.基本语法

    这里写图片描述

    2.案例:点击表单隐藏文字

    鼠标没点击之前:
    这里写图片描述
    鼠标点击之后文字消失:
    这里写图片描述

    代码及其分析:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>点击隐藏文字</title>
        <style>
            input{
                width: 150px;
                height: 16px;
                color: #ccc;
                font-size: 12px;
            }
        </style>
        <script>
    //  首先分析事件逻辑:
    //  1.点击表单,默认字消失,并有光标显示;
    //  2.输入要搜索的字,字体变深;
    //  3.当清空输入的字,光标消失,默认字再次出现。
            window.onload = function () {
                function $(id) {
                      return document.getElementById(id)
                }
                //获取ID函数
                $("bdan").onfocus = function fn() {
    //          获取焦点用onfocus事件。下面,用if语句判断条件是否成立。
    //          当用户没有在表单输入的时候,也就是表单里面是默认字的时候,
    //          清空value值,然后改变字体颜色。
                    if($("bdan").value == "请输入..."){
    //                    注意用“==”号,表示等于,单等号意思是赋值。
                        $("bdan").value = "";
    //                    清空表单默认字
                        $("bdan").style.color = "#333";
    //                    改变字体颜色
                    }
                }
                $("bdan").onblur = function fn() {
    //                失去焦点用“onblur”事件
                    if($("bdan").value == ""){
                        $("bdan").value = "请输入...";
    //                    恢复默认字
                        $("bdan").style.color = "#ccc";
    //                    恢复字体颜色
                    }
                }
              }
        </script>
    </head>
    <body>
    <input type="text" value="请输入..."id="bdan"/><button id="btn">查找</button>
    </body>
    </html>

    做这些功能,最重要的是理顺业务逻辑,化整为零。获得焦点和失去焦点事件会在有搜索功能的网站上经常用到,所以要重点理解。谢谢大家!

    展开全文
  • js 焦点事件

    千次阅读 2019-01-06 16:23:50
    焦点:使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入。 我们可以通过一些方式给元素设置焦点 1 点击 2 tab 3 js 不是所有元素都能够接收焦点,能够相应用户操作的元素...

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

    我们可以通过一些方式给元素设置焦点

    1 点击

    2 tab

    3 js

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

    onfocus:当元素获取到焦点的时候触发

    onblur:当元素失去焦点的时候触发

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="{CHARSET}">
            <title></title>
            <script>
                window.onload = function(){
                    var oText = document.getElementById('text1');
                    oText.onfocus = function(){
                        if(this.value == '请输入内容'){
                            this.value = '';
                        }
                    }
                    oText.onblur = function(){
                        if(this.value == ''){
                            this.value = '请输入内容';
                        }
                    }
                }
            </script>
        </head>
        <body>
            <input type="text" id="text1" value="请输入内容" />
        </body>
    </html>

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

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

    obj.select() 选择制定元素里面的文本内容(注意:选中的是可交互性的文本内容,如input)

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="{CHARSET}">
            <title></title>
            <script>
                window.onload = function(){
                    var oText = document.getElementById('text1');
                    oText.onfocus = function(){
                        if(this.value == '请输入内容'){
                            this.value = '';
                        }
                    }
                    oText.onblur = function(){
                        if(this.value == ''){
                            this.value = '请输入内容';
                        }
                    }
                    oText.focus();
                    var oBtn = document.getElementById('btn');
                    oBtn.onclick = function(){
                        oText.select();
                    }

                }
            </script>
        </head>
        <body>
            <input type="text" id="text1" value="请输入内容" />
           <input type="button" id="btn" value="全选" />
        </body>
    </html>

     

     

     

     

     

    展开全文
  • 焦点

    2017-10-12 18:39:24
    widow.onload = function(){ var oText = document.getElementById('Id');... //当元素获取到焦点后触发 oText.onfocus = function(){ if(this.value='请输入文字'){ this.value=''; } } }这
    widow.onload = function(){
        var oText = document.getElementById('Id');
        //当元素获取到焦点后触发
        oText.onfocus = function(){
            if(this.value='请输入文字'){
                this.value='';
            }
        }
    }

    这段代码适用于判断文本框获取焦点提示的判断

    widow.onload = function(){
        var oText = document.getElementById('Id');
        //当元素失去焦点后触发
        oText.onblur = function(){
            if(this.value=''){
                this.value='请输入文字';
            }
        }
    }

    这段代码适用于判断文本框失去焦点提示的判断

    widow.onload = function(){
        var oText = document.getElementById('Id');
        //让元素获取焦点
        oText.focus()
    }

    这段代码适用于让特定元素获取焦点

    widow.onload = function(){
        var oText = document.getElementById('Id');
        //在输入框中执行全选操作
        oText.select()
    }

    这段代码适用于在输入框中执行全选操作

    展开全文
  • 焦点的应用

    2019-07-08 12:16:40
    焦点的应用 开发工具与关键技术:Visual Studio 2015 聚焦与失去焦点 作者:廖 茂 撰写时间:2019年07月01日 关于焦点这一东西,用的地方不多,不过不要以为用的不多就可以不理,在有些时候焦点很重要,有一些...
    					焦点的应用
    
    
    开发工具与关键技术:Visual Studio 2015   聚焦与失去焦点
    
    作者:廖 茂
    
    撰写时间:2019年07月01日
    
    

    关于焦点这一东西,用的地方不多,不过不要以为用的不多就可以不理,在有些时候焦点很重要,有一些功能需要利用焦点来实现,在这里,我们以一个选择地点的功能为例,详细说明一下焦点的用处,首先来看一下页面样式,如下:
    在这里插入图片描述

    给出发城市绑定一个城市选择的选项卡,点击输入框,选项卡就会弹出,当不选择城市而用鼠标点击其他地方时,选项卡就会关闭,这些操作就需要利用焦点来实现,选项卡的制作就不说了,主要说明一下功能代码,首先来看一下点击输入框弹出选项卡的功能代码,如下:
    在这里插入图片描述

    用Jquery语句,通过输入框的ID绑定点击事件,点击输入框,就会把选择城市的选项卡显示出来,diseled为存放选项卡的变量,由于考虑到点击其他地方,选项卡失去焦点,选项卡会隐藏;不选择城市且再次点击输入框,选项卡会隐藏;选择完城市后,选项卡也会隐藏。也就是说,有三个因素会让选项卡隐藏,代码如下:
    在这里插入图片描述

    第一个就是点击其他地方导致选项卡隐藏的方法,“blur”就是元素失去焦点时发生的事件;第二个是当鼠标再次点击,选项卡会隐藏的方法,“keydown”就是鼠标再次点击的事件;第三个就是选择了城市之后,选项卡会隐藏的方法,“.linkdhu”是所有包含城市的标签的类,通过类名绑定点击事件。当然,第三个方法不可能是选择完城市把选项卡关闭就可以了的,还需要把选择到的城市回填到输入框中,如下:
    在这里插入图片描述

    通过类名绑定点击事件,把选择到的标签的文本赋值给输入框,这样选项卡的显示和选项卡隐藏的因素的方法就写好了,接下来编写聚焦和失去焦点的方法,首先声明两个对象分别用来记录焦点元素和记录状态,如下:
    在这里插入图片描述

    然后编写输入框聚焦事件,如下:
    在这里插入图片描述

    首先通过输入框的父元素的ID找到输入框的类名,当输入框获取到焦点时,发生“focus”事件,然后创建一个对象存放城市选择选项卡,然后通过this引用前面创建的对象,通过“parent”方法获取到最外层的父元素,然后用“append”方法给最外层的父元素添加上城市选择选项卡,接着设置选项卡的display属性让选项卡显示并且设置定位,因为选项卡的默认位置不太好,所以需要设置一下,最后记录一下元素this,也就是diseled对象,在设置记录状态为false,聚焦的方法就写完了,接下来看一下失去焦点的方法,如下:
    在这里插入图片描述

    开始和聚焦一样,都是通过输入框的父元素的ID找到输入框的类名,当失去焦点时,发生“focusout”事件,然后在方法里面创建一个对象,获取到选项卡,接着判断如果状态不为“isMouseOver”,也就是不为“false”,最后把选项卡隐藏。失去焦点的方法就是这样。这样还没完,让输入框聚焦和失去焦点肯定需要鼠标进行点击的操作,如下:
    在这里插入图片描述

    第一个是鼠标进入事件,当鼠标进入选项卡时,状态设置为true,第二个是鼠标离开事件,当鼠标离开选项卡范围时,状态设置为false,第三个就是点击选择城市时,焦点设置为选中的城市,最后把选项卡隐藏。

    焦点在这里的的用处就是通过焦点的改变来决定选项卡的显示和隐藏。

    展开全文
  • Vue中自动获取input焦点

    万次阅读 热门讨论 2018-09-03 11:24:36
    &lt;input v-focus type="text" name="search" ref="input" autofocus v-model="inputValue" maxlength="10" @input="handleOnInput()"...
  • javascript判断元素是否已经focus

    万次阅读 2016-04-21 09:32:08
    javascript判断元素是否已经focus 获取焦点事件
  • 一个组件里面用v-for 遍历出了多个input框,按钮只有一个,如何点击按钮,根据参数0,1,2,3。根据参数来让对应的第几个input框获取焦点
  • Android TV开发总结【焦点

    万次阅读 2018-06-28 21:31:47
    一、焦点获取 首先,TV端的开发和我们手机端开发最大的区别就在于TV端存在焦点的概念。 如下图: 可想而知,手机端我们直接通过点击\长按某个区域处理响应事件处,但是TV端只能通过遥控器的上下左右来操控焦点...
  • 关于焦点小组(Focus Group)访谈法

    万次阅读 2015-02-02 13:55:32
    焦点小组访谈法源于精神病医生所用的群体疗法。目前的焦点小组一般由8-12人组成,在一名主持人的引导下对某一主题或观念进行深入讨论。焦点小组调研的目的:在于了解和理解人们心中的想法及其原因。调研的关键是,使...
  • 市场调研方法:焦点小组访谈法

    千次阅读 2019-11-20 14:27:47
    一、 关于焦点小组(Focus Group)访谈法  焦点小组访谈法源于精神病医生所用的群体疗法。目前的焦点小组一般由8-12人组成,在一名主持人的引导下对某一主题或观念进行深入讨论。焦点小组调研的目的:在于了解和...
  • pmp访谈法和焦点小组区别 像大多数软件公司一样,Microsoft几乎所有的技术面试都涉及某种编码问题。 在那期间,我遇到了许多不同的问题。 它们通常都具有您可以很好地讨论一般问题空间,设计解决方案和权衡因素的...
  • 焦点小组会议和引导式研讨会都是项目范围管理中收集需求的工具。 相同点:都需要有经验的主持人主持。 焦点小组会议是把预先选定的干系人和主题专家集中在一起,了解他们对所提议产品、服务或成果的期望和态度。由一...
  • 这一篇中,我们会重点来介绍关于数据收集中所运用的焦点小组数据收集法。 什么是焦点小组焦点小组是指在数据收集中是通过倾听一组从调研者所要研究的目标市场中选择来的被调查者,从而获取对一些有关问题的深入...
  • 焦点小组会议与引导式研讨会

    千次阅读 2018-02-02 10:45:10
    焦点小组会议和引导式研讨会都是项目范围管理中收集需求的工具。    焦点小组会议是把预先选定的干系人和主题专家集中在一起,了解他们对所提议产品、服务或成果的期望和态度。由一位受过训练的主持人引导...
  • 问卷调查目的:从目标人群中尽可能多地收集问题答案。【闭合】执行者能力要求:尽可能多收集问题答案。这个要求低。分析者:分析目标人群,从答案中分析提炼,要求高。头脑风暴目的:收集尽可能多的创意,想法。...
  • 焦点小组是有一位受过训练的主持引导预定相关方和主题专家进行互动式讨论, 了解他们对所提议的产品、服务、或者成果的期望和态度。 二、所属过程 4 项目整合管理 / 4.1 制定项目章程 / 4.1.2 制定项目章程:...
  • 1.专家判断 关键词:主题专家 有经验的人,大家一起拍脑袋、想事情。专家不一定是学富五车的人,只要是能够给我们提供当前活动合理判断的都是专家。 专家判断是一种能够快速得出结论的方法。...
  • 联机焦点小组的实现

    千次阅读 2005-10-09 06:48:00
    联机焦点小组的实现白文涛1, 刘正捷1, 郭丹11 (中国欧盟可用性研究中心 大连海事大学 计算机学院,辽宁 大连 116026) 摘 要: 焦点小组在用户需求分析中起着相当大的作用。传统的焦点小组方法又存在很多缺点,...
  • 小组焦点座谈的基本过程

    千次阅读 2014-03-04 10:19:13
    小组焦点座谈会是帮助企业和咨询公司深入了解消费者内心想法的最有效的工具,在这方面是一般的问卷调查等方法所无法比拟的。如今,小组座谈会在产品概念、产品测试、产品包装测试、广告概念、顾客满意度、用户购买...
  • 博主之前在用vue的获取焦点,失去焦点的时候,出现了@blur和@focus无效的情况。当时百思不得其解。今天又在写vue页面的时候,突然@blur和@focus又好用了。emmmm,看来这部分值得一战。 二、首先是正宗的监听事件的...

空空如也

1 2 3 4 5 ... 20
收藏数 335,832
精华内容 134,332
关键字:

焦点