JavaScript - 模拟键盘输入支付密码

Max.Bai

2016-12-29

0x00: 发生了什么事

我做自动化测试的时候，需要自动化在页面上输入这个密码，什么样子的，看下面：

有没有很像支付宝的支付密码输入框
（这个图片修改了3次，才传上来。。。）

0x01. 密码输入框后面的input

其实说到底他后面就是个input，来看下这个例子的源码什么样子的：

  <div class="wallet-input clear">
   <input id="wallet-pwd" name="wallet-pwd" type="tel" maxlength="6" pattern="d*" autocomplete="off" />
   <ul>
    <li class="active"><i></i></li>
    <li><i></i></li>
    <li><i></i></li>
    <li><i></i></li>
    <li><i></i></li>
    <li><i></i></li>
   </ul>
  </div>

那么你输入的密码是保存的input 的value里面的。。。

0x02. 确定input的监听事件是什么

那么他如何实现这个效果的那，没错javascript脚本了，找到对应的脚本

            $("#wallet-pwd").click();
            $("#wallet-pwd").on('keyup',function(e){

                var ul=$(".wallet-input ul li");
                var pwd=$(this).val();
                var len=pwd.length;
                for(var i=0;i<6;i++){
                    if(i<len){
                        $(ul[i]).addClass("active");
                    }else{
                        $(ul[i]).removeClass("active");
                    }
                }
                if(len==6){
                        //第三方支付
                    setTimeout(function(){
                         //存支付密码
                        $("#wallet_passwd").val(hex_md5(pwd));
                        $("#wallet_passwd1").val(hex_md5(pwd));
                        payxxxxx();
                    },100);
                }
            })

现在知道了，他上面其实是绑定了一个keyup事件，当输入的密码达到6位的时候执行提交

0x03. 在input上触发键盘事件

弄清楚之后那就简单了，我们只要两步就解决了，

1. 用javascript给input赋值

2. 触发keyup事件就解决问题了。

javascript 模拟键盘时间触发keyup就成了关键的步骤，各种查找，终于找到一个可用的。。。

$("#wallet-pwd").val(888888);
Podium = {};
Podium.keyup = function(k) {
    var oEvent = document.createEvent('KeyboardEvent');

    // Chromium Hack
    Object.defineProperty(oEvent, 'keyCode', {
                get : function() {
                    return this.keyCodeVal;
                }
    });     
    Object.defineProperty(oEvent, 'which', {
                get : function() {
                    return this.keyCodeVal;
                }
    });     

    if (oEvent.initKeyboardEvent) {
        oEvent.initKeyboardEvent("keyup", true, true, document.defaultView, false, false, false, false, k, k);
    } else {
        oEvent.initKeyEvent("keyup", true, true, document.defaultView, false, false, false, false, k, 0);
    }

    oEvent.keyCodeVal = k;

    if (oEvent.keyCode !== k) {
        alert("keyCode mismatch " + oEvent.keyCode + "(" + oEvent.which + ")");
    }

    document.getElementById("wallet-pwd").dispatchEvent(oEvent);
}

Podium.keyup(48);

上面的脚本在上面的页面实现中在Chrome 54是成功的。

0x04. 我都看了哪些文章

如果你看到我的记录，但是你的问题还没有解决，那么可能有几种情况你可以考虑：
1. 你可以尝试jquery 来解决，我的没成功，你不防试试，这个依赖jquery的版本，啥版本我也不知道。

http://blog.csdn.net/lufengsn/article/details/7060626

// jQuery插件。一个jQuery对象，而不是直接调用。  
jQuery.fn.simulateKeyPress = function(character) {  
  // 内部调用jQuery.event.trigger  
  // 参数有 (Event, data, elem). 最后一个参数是非常重要的的！  
  jQuery(this).trigger({ type: 'keypress', which: character.charCodeAt(0) });  
};  
  
//页面调用  
jQuery(document).ready( function($) {  
  // 绑定事件处理程序  
  $( 'body' ).keypress( function(e) {  
    alert( String.fromCharCode( e.which ) );  
    console.log(e);  
  });  
  // 模拟按键了 x  
  $( 'body' ).simulateKeyPress('x');  
});

2. 可能你的浏览器和我的不一样，这个就尴尬了，每个浏览器实现的方式都不一样，应为内核不一样模拟键盘的方法有所差别。
http://stackoverflow.com/questions/10455626/keydown-simulation-in-chrome-fires-normally-but-not-the-correct-key
http://jsbin.com/awenaq/4 这个页面实现了3种方法，支持在线调试，你可以在你的浏览器里面在线调试，只到找到你合适的脚本，我就是这样干的