精华内容
下载资源
问答
  • 博主之前在用vue的获取焦点,失去焦点的时候,出现了@blur和@focus无效的情况。当时百思不得其解。今天又在写vue页面的时候,突然@blur和@focus又好用了。emmmm,看来这部分值得一战。 二、首先是正宗的监听事件的...

    一、背景

          博主之前在用vue的获取焦点,失去焦点的时候,出现了@blur和@focus无效的情况。当时百思不得其解。今天又在写vue页面的时候,突然@blur和@focus又好用了。emmmm,看来这部分值得一战。

    二、首先是正宗的监听事件的写法

    1、html代码

    //这是html的输入框。定义了一个获取焦点,失去焦点的方法
     <input placeholder="请输入企业名称" @blur="animateWidth('company_name','blur')" @focus="animateWidth('company_name','focus')" >
    

    2、JS部分

       // 失去焦点和得到焦点的验证方法,name为要验证的字段名,type为blur或focus
        animateWidth(name, type) {
          if (name == "company_name") {
            if (type == "blur") {
              this.companyName.animate = false;
            } else {
              this.companyName.animate = true;
              return;
            }
            if (this.companyName.companyName.trim().length == 0) {
                this.companyName.valid = false;
                this.companyName.message = "请输入企业名称";
                return false;
            }else{
                 this.companyName.valid = true;
                return true;
            }  
          } 
        },
    

    这个方法算是通用的方法,大家在html里面根据自己的需求传不同的值即可。

    三、为什么上次监听焦点事件失败呢

    1、不好用的原因

    博主又去看最初自己用@blur和@focus失败的代码,发现:

      <i-input class="wallet-password-1" size="large"  v-model="counts" refs = "counts" placeholder="0" type="number">
                    </i-input>
    

          上次用的html部分是借用i-view框架的,也就是说,我们在使用vue的一些方法的时候,可能会和ui框架定义的方法冲突。这部分参考博客:
    https://segmentfault.com/q/1010000011021884

          了解原因之后,我们就知道了,使用vue自带的@blur和@focus是没问题的,如果在你的代码中不起作用,那只能证明一件事,那就是你的UI框架自己定义的有获取焦点失去焦点的方法。建议大家使用UI框架之前,先去官方文档看看,这样会好很多。

    2、新增指令的方法

          之前百度的时候,看到很多人都说可以通过新增指令来自定义获取焦点失去焦点的方法,具体的可以参考博客:
    https://blog.csdn.net/weixin_42011096/article/details/80764182

    出现这个问题,说到底还是自己对vue不熟练造成的,姑且记录一下吧。

    end

    展开全文
  • input获取焦点和失去焦点

    万次阅读 2018-07-13 12:14:25
    onBlur:当输入框失去焦点后  onFocus:当输入框获得焦点后 onblur 是原生 js 的写法,可以直接写在元素的属性中或者在脚本中定义; &lt;input type="text" id="demo" onblur=" ...

     

    js用法:

    onBlur:当输入框失去焦点后 

    onFocus:当输入框获得焦点后

    onblur 是原生 js 的写法,可以直接写在元素的属性中或者在脚本中定义;
    <input type="text"  id="demo"  οnblur=" demo() " >,或者
    <script>

    function demo(){

    //执行的函数  为空则为空

    }

    或者不在元素属性中使用 onblur,而是直接用js  绑定时事件
    var demo = document.getElementById('demo');

    demo.onblur = function(){     //执行的函数     };

    </script>

     

    jq用法:

    focus();获取焦点

    blur();失去焦点

    focus,blur 直接绑定对象;

    $( '#demo' ).focus();

    或  $( '#demo' ).focus( function(){

    //失去焦点时执行的函数
    } )

    $( '#demo' ).blur();

    或 $( '#demo' ).blur( function(){
    //失去焦点时执行的函数

    } )或

    $(document).on("blur","",function(){

    //失去焦点时执行的函数

    })

     

    :focus伪类来判定元素是否获取焦点;

    var $focused = $(':focus');
     
    var focused = document.activeElement;
     
    var hasFocus = $('input').is(':focus'); //判断是否有:focus;
     
    elem === elem.ownerDocument.activeElement;

    展开全文
  • 焦点处理 焦点处理主要包括focus(获取焦点)和blur(失去焦点)事件类型。所谓焦点,就是激活表单字段,使其可以响应键盘事件。 获取焦点:focus 当单击或使用Tab键切换到某个表单元素或超链接对象时,会触发该事件...

    焦点处理

    焦点处理主要包括focus(获取焦点)和blur(失去焦点)事件类型。所谓焦点,就是激活表单字段,使其可以响应键盘事件。

    获取焦点:focus

    当单击或使用Tab键切换到某个表单元素或超链接对象时,会触发该事件。focus事件是确定页面内鼠标当前定位的一种方式。在默认情况下,整个文档处于焦点状态,但是单击或者使用Tab键可以改变焦点位置。‘

    示例:在页面加载完毕后,将焦点转移到表单中的第一个文本框字段,让其准备接收用户输入

    <form id="myform" method="post" action="#">
    	姓名<input type="text" name="name"/><br>
    	密码<input type="password" name="pass" />
    </form>
    <script>
    	var form = document.getElementById("myform");
    	var field = form.elements("name");
    	window.onload = function(){
    		field.focus();
    	}
    </scriipt>
    

    失去焦点:blur

    blur事件类型表示在元素失去焦点时响应,它与focus事件类型是对应的,主要作用于表单元素和超链接对象

    示例:为所有输入表单元素绑定了focus和blur事件处理函数,设置当元素获取焦点时呈凸起,失去焦点呈凹陷

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<input type="text" />
    		<input type="text" />
    		<script>
    			var o = document.getElementsByTagName("input");
    			for(var i = 0; i < o.length; i++){
    				o[i].onfocus = function(){
    					this.style.borderStyle = "outset";
    				}
    				o[i].blur = function(){
    					this.style.borderStyle = "inset";
    				}
    			}
    		</script>
    	</body>
    </html>
    

    在这里插入图片描述

    注意:如果时隐藏字段(< input type=“hidden” >),或者使用CSS的display和visibility隐藏字段显示,设置其获取焦点将引发异常。

    展开全文
  • android焦点

    万次阅读 多人点赞 2016-05-31 22:16:11
    在非触摸屏设备中接收事件和处理响应的控件是具有焦点(Focused)的控件。窗口中某一时刻只能有一个具有焦点的控件,在触摸设备上通常默认情况下只有EditText控件才具有焦点。比如一个页面有3个EditText,那么当你键盘...

             在非触摸屏设备中接收事件和处理响应的控件是具有焦点(Focused)的控件。窗口中某一时刻只能有一个具有焦点的控件,在触摸设备上通常默认情况下只有EditText控件才具有焦点。比如一个页面有3个EditText,那么当你键盘输入内容的时候,这个时候会在哪一个EditText里面显示内容呢?这个时候就是谁获得了焦点就在那个EditText中显示内容。(注意:有很多人把焦点和点击混了,以为我点击了某个控件,这个控件就获取焦点了,这个是不一定的,不能这么认为!

            1、获取焦点的两种模式    

            1)、普通模式focusable

            请求普通获取焦点的能力(可以理解为通过物理键盘),在xml中的配置是android:focusable="true"。

            出现这种模式主要是因为Android系统不仅仅是针对手机的,有可能在电视、手表等非触摸输入设备上。手机上普通模式很少用了,现在的手机基本都是触摸屏并且没有物理上下键的,这种模式是用在TV等一些有物理键的产品。如果设置为true,则键盘上下左右选中,焦点会随之移动。如有物理上下键,你按一个向下键,屏幕上的内容就会对应选中一个向下的控件,如果这个控件有focusable能力的话这个时候这个控件就是获得了焦点。

     

            2)、触摸模式focusableInTouchMode

            请求有触摸获取焦点的能力,在xml中的配置是 android:focusableInTouchMode="true"。

            现在的手机都是触摸模式(TocuMode),当你触摸一个控件的时会获取焦点。有些控件是默认不具有触摸获取焦点的功能,Button、TextView、LinearLayout等是默认没有触摸获取焦点功能的,为什么会有这种问题呢?原因是这些控件有时候会想要先响应点击事件,如果触摸获取焦点功能打开后,当你点一下,默认是不会调用点击事件的,会先让这个控件获取焦点,触发 OnFocusChangeListener,获取焦点后点击才会触发点击事件。EditText是默认有触摸获取焦点功能的,并将第一抢先获取焦点,因此页面有EditText的时默认有光标,键盘弹出。

            2、ViewGroup设置子控件获取焦点模式

    public void setDescendantFocusability(int focusability)

    focusability可设置的值如下

    FOCUS_BLOCK_DESCENDANTS:阻止子视图成为焦点视图,即使子视图调用requestFocus()也不能成为焦点视图。

    FOCUS_BEFORE_DESCENDANTS:当ViewGroup调用requestFocus时总是优先让自己成为焦点视图。

    FOCUS_AFTER_DESCENDANTS:当ViewGroup调用requestFocus时优先让里面的子视图成为焦点,只有子视图无法成为焦点时才让自己成为焦点视图,这个特性也是默认特性。

            3、焦点相关方法

    View.isFocused() 当前视图是否是焦点视图

    View.hasFocus() 当前视图是否是焦点视图或子视图里面有焦点视图

     

    hasFocus和isFocused区别主要在ViewGroup上,hasFocus只要自己或者儿子视图是焦点视图都返回true,isFocused一定要自己是焦点视图。

            4、EditText可见时默认isFocused()是true

            5、常用控件默认isFocusable()、isFocusableInTouchMode()值

      isFocusable() isFocusableInTouchMode()
    Button true false
    CheckBox true false
    EditText true true
    TextView false false
    ImageView false false
    LinearLayout false false

            6、焦点相关的问题

            1)、ScrollView中包含有又焦点的控件时会自动滚动以使有焦点的控件显示出来(即使没有显示)

    解决办法:在ScrollView的子控件中设置FOCUS_BLOCK_DESCENDANTS

            2)、ListView的item中有Button、CheckBox时无法响应item点击事件

    原因分析:是通过AbsListView的onTouchEvent()中

    case MotionEvent.ACTION_UP:处理item点击事件,AbsListView中onTouchUp()中

                    if (inList && !child.hasFocusable()) {
                        if (mPerformClick == null) {
                            mPerformClick = new PerformClick();
                        }

    这里判断了child.hasFocusable(),子控件可以获取焦点时不会调用mPerformClick.run(),不会调用performItemClick,不会调用super.performItemClick(),不会调用AdapterView中的mOnItemClickListener.onItemClick。Button、CheckBox的hasFocusable()默认都是true。

    两种解决方法:

            方法一:在checkbox、button对应的view处加android:focusable=”false”

            方法二:在item最外层添加属性 android:descendantFocusability=”blocksDescendants”

     

            方法一item没有设置descendantFocusability=”blocksDescendants”,遍历了所有子View,但是所有的子view都不可获得焦点,所有item也没有获取焦点,那么下面代码

    if (inList &&!child.hasFocusable()) {
    
    if (mPerformClick == null) {
    
    mPerformClick = new PerformClick();
    
    }
    
    .....
    
    }

    if条件成立执行回调。

            方法二item设置descendantFocusability=”blocksDescendants”,所有没有遍历子View,child.hasFocusable()直接返回false。if条件成立执行回调。

    展开全文
  • 获取焦点和失去焦点事件

    千次阅读 2019-05-11 21:18:22
    js处理获取焦点和失去焦点事件 获取焦点:focus 失去焦点:blur var vcode = '' $('#code').blur(function(){ //验证输入的验证码是否是发送的验证码 code = $(this).val() if (code != vcode) { $('#').next()....
  • 又是我们开发的时候回碰到想要获取EditText的获取焦点状态从而实现一些操作。 实现方法也很简单、那就是绑定OnFocusChangeListener事件、实现onFocusChange(View v, boolean hasFocus) 方法、第二个参数就是判断...
  • 但是TextView一旦失去焦点,滚动效果就停止了。 二、思路 重写TextView的回调函数,当失去焦点时仍然使其滚动。 三、参考代码 1. Java代码实现 package com.example.getsystempropclient; import android....
  • 获得焦点与失去焦点事件

    万次阅读 2017-04-12 10:38:19
    获得焦点事件(onfocus)是当某个元素获得焦点时触发事件处理程序。 失去焦点事件(onblur)是当前元素失去焦点时触发事件处理程序。 一般情况下,这两个事件是同时使用的。   二 应用 文本框获得焦点时改变...
  • 搜索框获取焦点 onfocus() 搜索框失去焦点 onblur() 搜索框值默认为羽绒服,当首次点击搜索框时搜索框值变为空, 当搜索框失去焦点时,如果搜索框的值为空,则搜索框值置为‘羽绒服’, 再次点击搜索框时,如果...
  • HTML获取焦点和失去焦点

    千次阅读 2019-03-27 10:52:36
    <input name="username" onfocus="function_1()" onBlur="function_2() " placeholder="请输入账户" /&... 其中,获取焦点事件语句是: onfocus="function_1()" 失去焦点事件语句是: onBlur="function_2() " ...
  • input获取焦点失去焦点变化

    千次阅读 2018-11-28 17:54:40
    input获取失去焦点 实现功能:input在获取焦点后添加边框,失去焦点后恢复原样。 .focus { border: 1px solid blue; } &lt;form action="#" method="POST" id="regForm"&...
  • js input获取焦点和失去焦点的操作

    千次阅读 2020-08-25 18:56:13
    获得焦点时改变文本框的背景和文字颜色,失去焦点时文本框的背景和文字颜色随机改变 onfocus获取焦点 onblur 失去焦点 <input type="text" value="根据焦点操作"> <style> input { width: 400px; ...
  • input文本框获取焦点和失去焦点判断

    万次阅读 2017-05-15 17:20:17
    onBlur:当输入框失去焦点后  onFocus:当输入框获得焦点后 这两个JavaScript事件是写在html标签中的例如: 使用jQuery的实现方法为:  对于元素的焦点事件,我们可以使用jQuery的焦点函数focus(),blur()。 ...
  • input失去焦点和获得焦点jquery焦点事件插件, 鼠标在搜索框中点击的时候里面的文字就消失了。 我们在做网站的时候经常会用到搜索框的获得焦点和失去焦点的事件,因为懒,每次都去写非常的烦,于是就一劳永逸,...
  • JavaScript中获取焦点和失去焦点事件的方法:focus(),blur() mui取焦点和失去焦点的方法:focusin,focusout 由于mui一般应用移动端,所以当触发聚焦事件时就会弹出手机上的键盘 //触发键盘会收起 $(document)....
  • 当input获取焦点的时候需要判断另一个操作是否已完成,否则需要引导用户先去执行另一个操作,是则允许输入。 另一个操作跟当前操作是在同一个页面上,无法通过“下一步”进行控制。 解决思路是: 当input获取焦点...
  • 输入框获得焦点和失去焦点

    千次阅读 2016-12-30 12:11:12
    项目产品需求,要求页面一加载的时候,就给文本框进行赋值“请输入招标项目编号”,当获得焦点事件的时候,将文本框的数据进行清空,当失去焦点事件的时候,文本框重新赋值为“请输入招标项目编号”。 HTML代码...
  • WebView无法获取焦点

    万次阅读 多人点赞 2017-04-20 13:58:18
    WebView无法获取焦点 Webview.setEnabled(false) WebView无法获取焦点,不弹软键盘
  • element input输入框自动获取焦点

    万次阅读 2019-10-25 14:25:40
    最近项目中在做表单的时候,需要自动滚动到评论框,并且让评论框自动聚焦,这就需要手动触发输入框的 focus 状态。 但是,element并不支持autofocus属性,那就只能通过原生的js效果获取聚焦效果了 ...
  • 焦点的用法,实现获取焦点清空失去焦点提示效果 (this.value==''){this.value='请填上您的宝贵意见,我们将尽快处理....';}" onfocus="if(this.v
  • PyQt4控件失去焦点和获得焦点

    千次阅读 2019-09-22 08:53:31
    #QListView控件多选设置self.ui.listView.setSelectionMode(QAbstractItemView.ExtendedSelection)#初始化QListView控件焦点事件self.ui.listView.installEventFilter(self) #焦点响应事件def eventFilter(self, ...
  • Unity:窗口焦点和鼠标焦点问题

    千次阅读 2019-08-27 17:35:43
    1、Unity 提供焦点监听函数Focus 切换的不同的软件,需要知道当前unity软件是否失去焦点。代码如下 void OnApplicationFocus(bool focus) { Debug.Log(string.Format("OnApplicationFocus:{0}", focus)); }...
  • EditText输入法获得焦点失去焦点 【问题】 默认是居中显示且非编辑状态,点击 EditText后文字居左且显示编辑状态;编辑状态时, 点击屏幕其他地方,使其失去焦点;进入界面时 EditText 获取焦点问题(默认状态下不...
  • 使用按钮进行文本信息的修改和删除,并从光标指定位置修改文本内容,不使用键盘的退格键。 ... window.onload = function()//文本获取焦点 {  document.getElementById('txt1').focus();

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 67,708
精华内容 27,083
关键字:

焦点