zoukankan      html  css  js  c++  java
  • oninput,onpropertychange,onchange的使用方法和差别

    1、前言

        因为工作须要,需实现一个相似于微博输入框的功能,在用户动态输入文字的时候,改动提示您还能够输入XX。例如以下图所看到的:

      

    因此,略微研究了一下oninput,onpropertychange,onchange的差别和使用方法,以及onpropertychangeie浏览器下的一个bug

     

    2oninput,onpropertychange,onchange的使用方法

    l          onchange触发事件必须满足两个条件:

    a)当前对象属性改变,而且是由键盘或鼠标事件激发的(脚本触发无效)

    b)当前对象失去焦点(onblur)

    l          onpropertychange的话,仅仅要当前对象属性发生改变,都会触发事件,可是它是IE专属的;

    l          oninputonpropertychange的非IE浏览器版本号,支持firefoxopera等浏览器,但有一点不同,它绑定于对象时,并不是该对象全部属性改变都能触发事件,它仅仅在对象value值发生改变时奏效。

     

    textarea中,假设想捕获用户的键盘输入,用onkeyup检查事件就能够了,可是onkeyup并不支持复制和粘贴,因此须要动态监測textarea中值的变化,这就须要onpropertychange(用在IE浏览器)和oninput(非IE浏览器)结合在一起使用了。

     

    3、代码实现:

     

    第一种方法是直接写入textareaonpropertychangeoninput属性

     

    假设想要用JavaScript设置textarea的属性,需例如以下:

     

    其余函数

     

      

     

    4onpropertychangebug

        在代码实现时,发如今响应用户onclicktextarea时,假设使用obj.className="XX";来改变textarea输入框中字体的样式,会导致在ie下会有在输入第一个字符的时候onpropertychange不会触发的bug,因此须要这样设置:obj.style.color="#000";

  • 相关阅读:
    WF4.0 Beta1 自定义跟踪
    WF4.0 Beta1 流程设计器与Activity Designer
    新版本工作流平台的 (二) 权限算法(组织结构部分)
    WF4.0 Beta1 WorkflowInvoker
    WF4.0 基础篇 (十) Collection 集合操作
    WF4.0 基础篇 (十五) TransactionScope 事物容器
    WF4.0 基础篇 (六) 数据的传递 Arguments 参数
    WF4B1 的Procedural Activity 之InvokeMethod , InvokeMethod<T> 使用
    WF4.0 Beta1 异常处理
    WF4.0 Beta1 变量 Variables
  • 原文地址:https://www.cnblogs.com/bhlsheji/p/4255875.html
Copyright © 2011-2022 走看看