使用jQuery专注于输入

Question

我正在处理一个加载了jquery的网页，并且该网页上有一个支持自动完成的输入字段，因此在键入几个字符后，会显示一个建议框。 通过使用开发工具的控制台，我可以通过执行以下jquery函数（ 在浏览器控制台中 ）来强制生成建议列表并按需出现：

$('input#PrincipalPolicyHolder_EmploymentOccupationDescription').val("soft");

setTimeout(function() { $('input#PrincipalPolicyHolder_EmploymentOccupationDescription').focus(); }, 5000);

setTimeout(function() { $('input#PrincipalPolicyHolder_EmploymentOccupationDescription').keyup(); }, 6000);

需要延迟才能将焦点从控制台更改为窗口。 这些jQuery命令足以获取$('#PrincipalPolicyHolder_EmploymentOccupationDescription').is('focus') true，只要我不单击其他地方，就可以生成建议列表。

但是，相同的步骤在casperjs环境中不起作用。 这就是我的执行方式；

casper.then(function () {
    this.evaluate(function () {
        $('input#PrincipalPolicyHolder_EmploymentOccupationDescription').val("soft");
        $('input#PrincipalPolicyHolder_EmploymentOccupationDescription').focus();
        $('input#PrincipalPolicyHolder_EmploymentOccupationDescription').keyup();
    });
});

我还尝试将sendKeys与keepFocus: true一起使用，但从未使is(':focus')检查为正。 有什么办法可以做到这一点？

编辑：我将问题缩小到可以在一个非常简单的网页上工作，这是捕获问题的代码片段：

var casper = require('casper').create({
    verbose: true,
    loglevel: "debug"
});

casper.start('http://jsfiddle.net/vhermL99/embedded/result/');

casper.on('remote.message', function(msg) {
    this.echo('remote message caught: ' + msg);
});

casper.withFrame(0, function () {
    casper.thenEvaluate( function () {
    var input = $('#input1');
    input.val("value set by jquery");
    input.focus();
    console.log("is input focussed: " + input.is(':focus'));
    });
    casper.then(function () {
    this.capture('before-sendkey.png');
    });
    casper.then(function () {
    casper.sendKeys('#input1', 'value set by sendKeys', {'reset': true, 'keepFocus': true});
    });
    casper.thenEvaluate(function () {
    console.log("is input focussed: " + $('#input1').is(':focus'));
    });
    casper.then(function () {
    this.capture('before-sendkey.png');
    });

});

casper.run();

期望在两种方法之一中具有.is(':focus') true。

Answer 1

您也可以在CasperJS中执行与在浏览器控制台中相同的操作。 您只需要注意，在页面上下文中启动异步流程时，您就会脱离CasperJS的控制流程。 因此，您需要在Casper上下文中等待结果，因为现在您实际上有两个控制流。

casper.thenEvaluate(function () {
    $('input#PrincipalPolicyHolder_EmploymentOccupationDescription').val("soft");

    setTimeout(function() { 
        $('input#PrincipalPolicyHolder_EmploymentOccupationDescription').focus(); 
    }, 5000);

    setTimeout(function() { 
        $('input#PrincipalPolicyHolder_EmploymentOccupationDescription').keyup(); 
    }, 6000);
});
casper.wait(10000, function(){
    // waited 10 seconds, so do something with the autocomplete result
});

您也可以使用本地PhantomJS sendEvent函数进行尝试：

casper.then(function () {
    this.evaluate(function(){
        var el = document.querySelector('input#PrincipalPolicyHolder_EmploymentOccupationDescription');
        el.focus();
    });
    this.page.sendEvent('keypress', 'soft');
});
casper.wait(10000, function(){
    // waited 10 seconds, so do something with the autocomplete result
});

Answer 2

设置超时根本不是一个好主意。

考虑到您正在使用最新的CasperJS版本，最好使用waitFor实用程序方法： http ://casperjs.readthedocs.org/en/latest/modules/casper.html?highlight=waitfor#waitfor。

另外，您可以使用sendKeys方法模拟行为以“键入”到文本输入中： http ://casperjs.readthedocs.org/en/latest/modules/casper.html?highlight=waitfor#sendkeys。

问候，