前端MiniUi框架获取input实时输入

雨点打透心脏的1/2处 2022-05-24 13:41 531阅读 0赞

# 问题场景 #

> 本系统前端框架用的miniui，该框架封装蛮全面的，但是文档少得出奇，一个官方API就大概说了他们有什么，简单的怎么用，对于简单场景其实也可以应付，但是复杂点的场景靠看API就力不从心了。

#### html ####

#### JS ####

function valueChange(){ 
        console.log(document.getElementById("jbfltaskname2").value);
    
    }

发现miniui的onvaluechanged事件就是blur事件，失去焦点才能触发，有点莫名其妙。

![这里写图片描述][70]

看了下官方文档，确实有valuechanged事件，然并卵。

# 分析过程 #

*  试着用jQuery绑定解决(`扑街`)

$('#jbfltaskname2').bind('input propertychange', function() { 
        console.log($(this).val());
        //输出undefined
    });

*  试着用js原生解决(`扑街`)

function valueChange(){ 
        console.log(document.getElementById("jbfltaskname2").value);
        //输出undefined
    }

*  试着用miniui去解决(`扑街`)

> 由于miniui的valuechanged事件然并卵，所以改用keydown事件

<div role="control">
        <input  class="mini-textbox" id="jbfltaskname2" keydown="valueChange"/>
    </div>
    
    function valueChange(){ 
        console.log(mini.get("jbfltaskname2").getValue());
        //输入和输出延迟一位，比如输入12，控制台输出1
    }

# 解决方案 #

<div role="control">
        <input  class="mini-textbox" id="jbfltaskname2"/>
    </div>
    
    $('#jbfltaskname2 input').bind('input propertychange', function() { 
        console.log("===="+$(this).val());
    });

![这里写图片描述][70 1]

`原因`：原来miniui组件会自动生成一堆标签，我们直接通过input定义的id肯定是拿不到值的。  
![这里写图片描述][70 2]

[70]: /images/20220524/ebbf83c26b5e40778390c5b2ea4d27c5.png
[70 1]: /images/20220524/2aab8d0eff9346bda66576e26a6b7f04.png
[70 2]: /images/20220524/0a63e63c507c49fba2426386f7ef11e8.png