onfocus事件 react_react onfocus事件 - CSDN
  • 注册新用户为确保用户名唯一性 需要一个onBlur事件确保用户名唯一 如果出现用户注册中途撤销 点击关闭按钮也会触发onBlur事件 解决onBlur事件与... 代码如下 ...+"&...input class=‘ANUinput’ typ

    注册新用户为确保用户名唯一性 需要一个onBlur事件确保用户名唯一 如果出现用户注册中途撤销 点击关闭按钮也会触发onBlur事件 解决onBlur事件与onfocus事件冲突 就需要在‘’关闭‘’按钮添加onmouseover、 onmouseout可以解决。

     /*用户注册界面 */ 
    var htm="<form action ='${ pageContext.request.contextPath }/addUser.action'   method='post' ><div id='register' style='position:fixed; height:420px; border-radius:5px; z-index:4;"
               +" width:600px; background:#eeeeee;'><div class='AETop' ><em id='close' style='font-size:30px; "
               +"float:right; margin-right:20px;'  onmouseover='removeblur()' onmouseout='addblur();' ><img src='img/close.png ' style=' height:20px; line-height:20px; vertical-align:middle; margin-top:20px;  ' ></em><span style='color:#000; text-align:center; font-size:20px; line-height:60px;height:60px; margin-left:20px; font-weight: bold;'>添加新用户</span></div>"
               +"<input  type='text' style='display:none' id='userid'  name='userid' value="+data[0].id+" />"
               +"<div style='margin-top:35px;'><div class='ANUser'><span class='ANUspan'>用户名:</span><input class='ANUinput' type='text'  id='username'  name='username' value="+data[0].username+"   onblur='compname()' required='required' /></div>"
               +"<div class='ANUser' ><span class='ANUspan' >密码:</span><input type='password'  class='ANUinput' id='password' name='password' value="+data[0].password+ " required='required'  /></div>"
               +"<div class='ANUser' ><span class='ANUspan'  >手机号码:</span><input type='text' class='ANUinput' id='phonenum' name='phonenum' value="+data[0].phonenum+"  /></div>"
               +"<div class='ANUser' ><span  class='ANUspan' >角色:</span><select type='text' class='ANUinput' id='roleid' name='roleid'  value="+data[0].roleid+" ><select></div></div>"
               +"<p  style='text-align:center;'> <input class='saveEdit' type='submit'  value= '保存'    /></p></div><form/>";
    
    
         /*关闭按点击事件 */ 
      $("#close").click(function(){
     		            removeWindow();
     		       	document.location.reload();
     		  });
      /*鼠标悬停在关闭按钮去掉username的onblur 事件 */ 
      function removeblur(){
        	var remo = document.getElementById('username');
            remo.removeAttribute('onblur');
        }
      /*鼠标离开关闭按钮添加username的onblur 事件 */   
        function addblur(){
         	var remo = document.getElementById('username');
            remo.setAttribute('onblur','compname()');
        }
          /*查看添加名称数据库中是否存在  */
      function compname(){
    		 var newname=$("#username").val();
    		 var userid=$("#userid").val();
    		  $.ajax({
    		        url: '${ pageContext.request.contextPath }/eqName.action?name='+newname,
    		        timeout:1000,
    		        type: 'POST',
    		        async: false,
    		        success: function (data) {
    		        	var data = JSON.parse(data);
    		        	if(data!=""){
    		        	 if(userid!=""&&userid==data[0].id){
    		               	}else{
    		               		alert("用户名已存在!");
    		               	}
    		        	}
    		        }
    		  });
    	 }
    
    展开全文
  • ios的H5页面使用input时,在修改input的value的值时,不会触发onfocus事件。解决方案: <div class="input_type" style="position: absolute; width: 92vw; text-align: left; z-index: 99;" @click="bgcolor('2'...

    ios的H5页面使用input时,在修改input的value的值时,不会触发onfocus事件。解决方案:

    <div class="input_type" style="position: absolute; width: 92vw; text-align: left; z-index: 99;"  @click="bgcolor('2')">米/秒</div>
    <div style="width:60vw; height: 100%; float: right; z-index: 0;">
        <div class="unit_km">m</div>
         <input id="input_sec2" v-model="msec" placeHolder="选择该项输入速度" class="input_sec" type="number"/>
    </div>
    

    JS部分

    bgcolor(str){
                        document.getElementById("input_sec"+str).focus();
                    }
    

    方法核心:使用z-index属性,在input的图层上方用absolute的position覆盖一个div,绑定div点击事件触发input的focus事件,即通过别的div的冒泡事件触发需要的功能。

    展开全文
  • React focus 事件的坑

    2019-04-01 01:56:09
    React 的 focus 事件实现有问题 React 的 focus 事件会冒泡,但是原生 DOM 的 focus 事件是不冒泡的; 原生 DOM 的 focusin 事件是会冒泡的,但是现在 React 没实现 focusin 事件; 所以现在根据 React 的 focus ...
        

    React 的 focus 事件实现有问题

    1. React 的 focus 事件会冒泡,但是原生 DOM 的 focus 事件是不冒泡的;
    2. 原生 DOM 的 focusin 事件是会冒泡的,但是现在 React 没实现 focusin 事件;
    3. 所以现在根据 React 的 focus 事件的行为,它应该被叫做 focusin 才对。

    可以看这个 demo

    另外可以发现 React 合成事件里的 eventPhase 也是错误的。

    相关 issue:

    1. Synthetic eventPhase doesn't reflect the synthetic phase
    2. onFocusIn/onFocusOut events

    用 enzyme 写测试的时候直接调用 input.focus() 不会触发事件

    原因是 React 的合成事件是通过捕获 document 上的事件实现的,但是因为 enzyme 的 mount 方法不会把创建的 div 挂到 body 上,所以直接在 DOM 元素上触发事件 React 会捕获不到。

    绕过方法是自己创建一个 div 挂到 body 上。

    const container = global.document.createElement('div');
    global.document.body.appendChild(container);
    
    mount(<App />, { attachTo: container });
    展开全文
  • {/*render中写方法*/} inputOnBlur = ()=&gt;{ this.setState({ isShowCheckBox:false ... inputOnFocus = ()=&gt; { this.setState({ isShowCheckBox:true }) } {/*return中组件内容*...
    {/*class中写方法*/}
    
    inputOnBlur = ()=>{
        this.setState({
          isShowCheckBox:false
        })
      }
    
      inputOnFocus = ()=> {
        this.setState({
          isShowCheckBox:true
        })
      }
      
    {/*return中组件内容*/}
    
    <Input placeholder="这是一个搜索框~" 
    	   prefix={<Icon type="search" style={{color: 'rgba(0,0,0,.25)'}}/>}
           onPressEnter={this.startSearch}         
           onBlur={this.inputOnBlur }
           onFocus={this.inputOnFocus }
     />
    
    {isShowCheckBox &&<div className='Box' ></div> }
    
    {/*prefix:带有前缀图标的 input*/}
    {/*onPressEnter: 回车键触发事件*/}
    {/*onBlur:失去焦点触发事件*/}
    {/*onFocus:获得焦点触发事件*/}
    
    
    

    获取焦点的效果:
    这里写图片描述
    失去焦点的效果:
    这里写图片描述

    展开全文
  • React组件事件响应React在构建虚拟DOM的同时,还构建了自己的事件系统;且所有事件对象和W3C规范保持一致。React事件系统和浏览器事件系统相比,主要增加了两个特性:事件代理、和事件自动绑定。1、事件代理区别于...

    React组件事件响应

    • React在构建虚拟DOM的同时,还构建了自己的事件系统;且所有事件对象和W3C规范
      保持一致。
    • React的事件系统和浏览器事件系统相比,主要增加了两个特性:事件代理、和事件自动绑定

    1、事件代理

    1. 区别于浏览器事件处理方式,React并未将事件处理函数与对应的DOM节点直接关联,而是在顶层使用
      了一个全局事件监听器监听所有的事件;
    2. React会在内部维护一个映射表记录事件与组件事件处理函数的对应关系;
    3. 当某个事件触发时,React根据这个内部映射表将事件分派给指定的事件处理函数;
    4. 当映射表中没有事件处理函数时,React不做任何操作;
    5. 当一个组件安装或者卸载时,相应的事件处理函数会自动被添加到事件监听器的内部映射表中或从表中删除。

    2、事件自动绑定

    1. 在JavaScript中创建回调函数时,一般要将方法绑定到特定的实例,以保证this的正确性;

    2.在React中,每个事件处理回调函数都会自动绑定到组件实例(使用ES6语法创建的例外);

    1. 注意:事件的回调函数被绑定在React组件上,而不是原始的元素上,即事件回调函数中的
      this所指的是组件实例而不是DOM元素;
    2. 了解更多React中的thisReact组件中的this

    3、合成事件

    与浏览器事件处理稍微有不同的是,React中的事件处理程序所接收的事件参数是被称为“合成事件(SyntheticEvent)”的实例。
    1. 合成事件是对浏览器原生事件跨浏览器的封装,并与浏览器原生事件有着同样的接口,如stopPropagation(),preventDefault()等,并且
      这些接口是跨浏览器兼容的。
    2. 如果需要使用浏览器原生事件,可以通过合成事件的nativeEvent属性获取
    3. React合成事件原理

    使用JSX,在React中绑定事件:

    <button onClick={this.onClick}>
        单击触发react事件
    </button>
    • React并不是将click事件绑在该div的真实DOM上,而是在document处监听所有支持的事件,当事件发生并冒泡至document处时,React将事件内容封装并交由真正的处理函数运行

    图片描述

    1. 每个合成事件有以下通用属性:
        - boolean bubbles
        - boolean cancelable
        - DOMEventTarget currentTarget
        - boolean defaultPrevented
        - number eventPhase
        - boolean isTrusted
        - DOMEvent nativeEvent
        - void preventDefault()
        - boolean isDefaultPrevented()
        - void stopPropagation()
        - boolean isPropagationStopped()
        - DOMEventTarget target
        - number timeStamp
        - string type
    • 注意:现版本React在事件处理程序通过中返回false停止传播,已不可用;
      取而代之的是需要手动调用e.stopPropagation()或e.preventDefalult().

    React支持的常用事件

    1、剪贴板事件

    onCopy onCut onPaste

    2、键盘事件

    onKeyDown onKeyPress onKeyUp

    3、焦点事件

    onFocus onBlur

    • 这些焦点事件工作在 React DOM 中所有的元素上 ,不仅是表单元素。

    4、表单事件

    onChange onInput onSubmit

    • onChange事件经过React改良,内容改变时即可实时触发;而原生的需内容改变且失去焦点后触发才触发。

    5、鼠标事件

    onClick onContextMenu onDoubleClick 
    
    onDrag onDragEnd onDragEnter onDragExit
    
    onDragLeave onDragOver onDragStart onDrop
    
    onMouseDown onMouseEnter onMouseLeave
    
    onMouseMove onMouseOut onMouseOver onMouseUp 
    • onMouseEnter 和 onMouseLeave 事件从离开的元素传播到正在进入的元素,而不是普通的冒泡,并且没有捕获阶段;只有在鼠标指针穿过被选元素时,才会触发。
    • onMouseOut onMouseOver事件:不论鼠标指针穿过被选元素或其子元素,都会触发。

    6、选择事件

    onSelect

    7、触摸事件

    onTouchCancel onTouchEnd onTouchMove onTouchStart

    8、UI事件

    onScroll

    9、滚轮事件

    onWheel

    10、图像事件

    onLoad onError

    11、动画事件

    onAnimationStart onAnimationEnd onAnimationIteration

    12、其他事件

    onToggle

    在React中使用原生事件

    • 由于原生事件需要绑定在真实DOM上,所以一般是在 componentDidMount阶段/ref的函数执行阶段进行绑定操作,在componentWillUnmount 阶段进行解绑操作以避免内存泄漏。
    import React,{Component} from 'react';
    import ReactDOM from 'react-dom'
    
    class ReactEvent extends Component {
    
        componentDidMount() {
            //获取当前真实DOM元素
            const thisDOM = ReactDOM.findDOMNode(this);
            thisDOM.addEventListener('click',this.onDOMClick,false);
    
        }
    
        componentWillUnmount() {
            //卸载时解绑事件,防止内存泄漏
            const thisDOM = ReactDOM.findDOMNode(this);
            thisDOM.removeEventListener('click',this.removeDOMClick);
        }
    
        onDOMClick(e){
            console.log(e)
        }
    
        render(){
            return(
                <div>
                    单击原始事件触发
                </div>
            )
        }
    }
    export default ReactEvent

    合成事件和原生事件混合使用

    • 响应顺序
    import React,{Component} from 'react';
    import ReactDOM from 'react-dom'
    
    class ReactEvent extends Component {
        constructor(props){
            super(props)
            this.state = {
                value: ''
            }
            this.onReactClick = this.onReactClick.bind(this)
        }
        componentDidMount() {
            //获取当前真实DOM元素
            const thisDOM = ReactDOM.findDOMNode(this);
            thisDOM.addEventListener('click',this.onDOMClick,false);
    
        }
    
        componentWillUnmount() {
            //卸载时解绑事件,防止内存泄漏
            const thisDOM = ReactDOM.findDOMNode(this);
            thisDOM.removeEventListener('click',this.removeDOMClick);
        }
    
        onDOMClick(e){
            console.log("原生事件绑定事件触发")
        }
    
        onReactClick(e){
            console.log("React合成事件绑定事件触发")
        }
    
        render(){
            return(
                <div onClick={this.onReactClick}>
                    单击事件触发
                </div>
            )
        }
    }
    export default ReactEvent
    • 首先DOM事件监听器被执行,然后事件继续冒泡至document,合成事件监听器再被执行。
    • 即,最终控制台输出为:

    • 合成事件绑定事件触发

    • 原生事件绑定事件触发

    • 阻止冒泡
    1. 如果在onDOMClick中调用e.stopPropagtion()
        onDOMClick(e){
            e.stopPropagation()
            console.log("原生事件绑定事件触发")
        }
    • 由于DOM事件被阻止冒泡了,无法到达document,所以合成事件自然不会被触发,控制台输出就变成了:

      • 原生事件绑定事件触发
    • 再测试个复杂的例子
    import React,{Component} from 'react';
    import ReactDOM from 'react-dom'
    
    class ReactEvent extends Component {
        constructor(props){
            super(props)
            this.state = {
                value: ''
            }
            this.onReactClick = this.onReactClick.bind(this)
            this.onReactChildClick = this.onReactChildClick.bind(this)
        }
        componentDidMount() {
            //获取当前真实DOM元素
            const thisDOM = ReactDOM.findDOMNode(this);
            thisDOM.addEventListener('click',this.onDOMClick,false);
            //获取子元素并绑定事件
            const thisDOMChild = thisDOM.querySelector(".child");
            thisDOMChild.addEventListener('click',this.onDOMChildClick,false);
    
        }
    
        onDOMClick(e){
    
            console.log("父组件原生事件绑定事件触发")
        }
    
        onReactClick(e){
            console.log("父组件React合成事件绑定事件触发")
        }
    
        onDOMChildClick(e){
            e.stopPropagation()
            console.log("子元素原生事件绑定事件触发")
        }
    
        onReactChildClick(e){
    
            console.log("子元素React合成事件绑定事件触发")
        }
    
        render(){
            return(
                <div onClick={this.onReactClick}>                
                    父元素单击事件触发
                    <button className="child" onClick={this.onReactChildClick}>子元素单击事件触发</button>
                </div>
            )
        }
    }
    export default ReactEvent
    • 通过设置原生事件绑定为冒泡阶段调用,且每次测试单击子元素按钮:

      1. 在子元素原生事件程序中阻止事件传播,则打印出:

        • 子元素原生事件绑定事件触发;
      2. 在父元素元素事件程序中阻止事件传播,则打印出:

        • 子元素原生事件绑定事件触发
        • 父组件原生事件绑定事件触发
      3. 在子元素React合成事件onClick中阻止事件传播,则打印出:

        • 子元素原生事件绑定事件触发
        • 父组件原生事件绑定事件触发
        • 子元素React合成事件绑定事件触发
      4. 在父元素React合成事件onClick中阻止事件传播,则打印出:

        • 子元素原生事件绑定事件触发
        • 父组件原生事件绑定事件触发
        • 子元素React合成事件绑定事件触发
        • 父组件React合成事件绑定事件触发
    • 可以看到若不阻止事件传播每次(单击子元素)事件触发流程是:

    Document->子元素(原生事件触发)->父元素(原生事件)->回到Document->React子元素合成事件监听器触发 ->React父元素合成事件监听器触发

    其实,React合成事件封装的stopPropagtion函数在调用时给自己加了个isPropagationStopped的标记位来确定后续监听器是否执行。
    展开全文
  • react事件大全

    2020-07-15 08:25:08
    有以下几种事件类型 React事件 中断类事件 定时触发的事件 复制类事件 组件类事件 键盘类事件 表单类事件 焦点类事件 鼠标类事件 选择器类事件 触摸类事件 插件类事件事件 多媒体类事件 图片类事件 动画类事件 ...
  • React事件行为 React中无法用return false去阻止事件的默认响应行为 必须用 event.preventDefault();阻止浏览器默认行为, 例如标签不跳转 注: IE不认,在IE下需要用window.event.returnValue= false; event....
  • 在学习焦点事件的时候,使用onfocus和alert(),onblue和alert(),点击文本框触发onfocus()事件,弹出alert文本信息,点击确定后又触发onblur事件,弹出alert()信息,再点击确定又触发onfocus事件,形成一个死循环,...
  • 获取焦点前言方式一:React.createRef()方式二:使用函数 前言 在React中,只要props或state发生改变,则render()方法必定执行,即DOM会更新。然React更新DOM时,可能会导致已经获取焦点的元素失去焦点,故此时需要...
  • React事件处理 1.事件绑定 1.React事件绑定语法与DOM事件语法相似; 2.语法:on+事件名称=事件处理函数,比如onClick = function(){}; 3.React事件使用驼峰命名法; 4.类组件与函数组件绑定事件是差不多的,只是在类组件...
  • 玩转React样式

    2016-09-09 23:44:43
    但是在React这里就是另外一回事了,虽然React不是不用CSS。但是,它在给元素添加样式的时候方式不同。React的核心哲学之一就是让可视化的组件自包含,并且可复用。这就是为什么HTML元素和Javascript放在一起组成了...
  • 参考建行的代码. 主要思想是: 在输入框input 里面利用onfocus 和onblur两个事件.分别将提示信息的class改变 .tip_on, .tip_off 代码如下     <br /> <head> ...
  • react事件

    2018-02-07 17:13:34
    一、事件处理函数的使用 鼠标事件: onClick onContextMenu onDoubleClick onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp onDrop onDrag onDragEnd ...
  • https://blog.csdn.net/weixin_41717785/article/details/81318212?utm_source=blogkpcl3
  • React事件大全

    2019-06-17 07:22:13
    2019独角兽企业重金招聘Python工程师标准>>> ...
  • After a lot of research, I was able to find a monkey patch for this issue on Android (I’m currently developing an Android app only). We should create a Native Module that calls InputMethodManager to ...
  • 其实很简单,我们只需要获取页面上的文本框,加上onfocus事件或者其他对应的事件即可。本文介绍了如何在获取焦点时切换样式,明白原理后,实现其他效果就很简单了。 许多重视用户体验的设计师都希望给文本框(input)...
  • 一:React事件的用法1、事件处理函数的使用:例如一个简单的绑定语法:onClick={this.handleClick}触摸类的事件:onTouchcancel、onTouchEnd、onTouchmove、onTouchStart键盘类事件:onKeyDown,onKeyPress、...
  • 解决思路一: 原本项目集成了ant-mobile,想直接使用ant的InputItem,但是很不幸,在react-native中并不支持focus方法。 解决思路二: 采用原生的TextInput,这里...import React from 'react' import Pro...
  • onMouseOver和onFocus

    2013-10-03 10:29:39
    onMouseOver="this.focus();" 意思是当鼠标划到上面...onFocus="this.select();"意思是当获得输入焦点的时候,选择全部内容。 这两句的效果是连续的,最终就是当鼠标划过的时候,获得输入焦点,并且全选已输入的内容
1 2 3 4 5 ... 20
收藏数 889
精华内容 355
关键字:

onfocus事件 react