valuechange

监控 input/textarea 的值变化,当值发生变化时在绑定元素上触发该事件.

为什么不使用原生的 change keydown keyup

  1. change 只有在输入框失去焦点时触发.
  2. keyup/down 对于国际语言的输入法不能全面支持(鼠标从输入法中选词)
  3. keydown/up 需要过滤不可见字符
  4. 程序设值不可以触发原生事件
  5. 从浏览器自带的 input 自动提示列表中鼠标选择项,不会触发 keydown keyup,但 input 值变化
  6. 右键鼠标黏贴不能支持

Note

当输入框获得焦点,程序动态设值可触发 valuechange 事件,否则不触发该事件.

语法

触发事件包括两个特殊属性

valuechange.prevVal

变化前的值

valuechange.newVal

当前(变化后)的值

Note

此事件只能在 input 以及 textarea 上注册,注册到其他类型元素上无效!

KISSY.Event.on(input,"valuechange",function(e){
        alert(e.prevVal); // => 旧值
        alert(e.newVal); // => 新值
});

示例

打开拼音输入法,输入时直接鼠标选词

<!DOCTYPE html>
<html>
<head>
<script src="//g.alicdn.com/kissy/k/1.4.7/seed.js" data-config="{combine:true}"></script>
</head>
<body>
        
    <label>输入 something:<input id='in' /></label>
    <div id='log' style='border:1px solid red;'></div>    
   

<script>       
    KISSY.use("node",function(S,Node){ 
        var $=Node.all;
        $("#in").on("valuechange",function(e){
            $("#log").html("old value : "+e.prevVal+"<br/>new value : "+e.newVal);
        });
    });
</script>

</body>
</html>