Question

我需要为一个显示简单数学问题的JsPsych实验编写一些试验代码。用户必须尽快在文本框中回答，然后按Enter键移至下一个问题。等等。

在每个问题上，都会显示一个文本区域供用户输入他/她的答案，这样的textarea必须立即有焦点。

我已经修改了调查文本插件，按Enter键继续审核，并在创建每个文本框时添加自动对焦属性。问题是自动对焦仅适用于第一次试验，并在其余部分停止工作。

下面提供了代码（为了工作，JsPsych文件夹必须在同一个目录上）：

<!doctype html>
<html>
    <head>
        <title>Habilidad Aritmetica</title>
        <!-- Inicio llamada a libreria JsPsych + Plugin -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="jspsych-5.0.3/jspsych.js"></script>
        <!-- Plugin para recibir texto estilo survey -->
        <script src="jspsych-5.0.3/plugins/jspsych-survey-text.js"></script>
        <!-- Plugin para desplegar elementos tipo instrucciones -->
        <script src="jspsych-5.0.3/plugins/jspsych-instructions.js"></script>
        <!-- *** CSS *** -->
        <link rel="stylesheet" type="text/css" href="style.css">       
    </head>
    <body>
        <div class="centered">
        <script>

                var aritm01={
                    type: 'survey-text',
                    timeline:[
                        {
                            questions:['<p>preg 1</p>']
                        }
                    ]
                };

                var aritm02={
                    type: 'survey-text',
                    questions:['<p>preg 2</p>']
                };

                var aritm03={
                    type: 'survey-text',
                    questions:['<p>preg 3</p>']
                };

                function advance(event){
                    $("textarea").keydown(function(event){
                        console.log(event.keyCode);
                        //event.preventDefault();
                        if (event.keyCode == 13) {
                            console.log("User pressed enter. Clicking continue button");
                            var btn = document.getElementById("jspsych-survey-text-next");
                            btn.click();
                            //event.preventDefault(); 
                        }
                    });
                }

                function recoverfocus(event){
                    $("textarea").focus();
                    }

                var second_battery = [];

                second_battery.push(aritm01);
                second_battery.push(aritm02);
                second_battery.push(aritm03);


                    jsPsych.init({
                        timeline: second_battery,
                        on_finish: function(){
                        jsPsych.data.localSave('second_battery_results.csv', 'csv');
                        },
                        default_iti: 0
                    });              
        </script>
        </div>
    </body>
</html>

从JsPsych的调查文本插件方面来看，重要的变化是：

focused_box = $("#jspsych-survey-text-" + i).append('<textarea autofocus onfocus="advance(event)" onblur="recoverfocus(event)" required name="#jspsych-survey-text-response-' + i + '" cols="' + trial.columns[i] + '" rows="' + trial.rows[i] + '"></textarea>');

（是的，我知道在线javascript是一个坏主意，但到目前为止，这是我设法让它工作的唯一方法）

我试过的东西：

很多类似的问题建议使用getElementById() 方法，或getElementsByTagName()，以处理DOM 元素，但由于某种原因，它们都不起作用。
我也试过了使用计时器聚焦文本区域，如建议here（关于该主题的其他解决方案也不起作用。
你可以从我的身上看到代码，我试图使用一个函数“恢复”焦点在Blur上触发。我也尝试过onLoad（）这样的方法，没有导致两种情况。
我试过在a上显示问题嵌套时间线在单个试验中，而不是使用许多试验。也没有运气。

我错过了什么吗？

一些额外的说明：

正如您可以从这个问题的标签中猜测的那样，JQuery和HTML5特定的功能完全被允许作为解决方案，以防无法自行完成自动对焦。没有必要限制自己，玩得开心。

此行为已在最新版本的Firefox for Ubuntu 16以及最新版本的Chrome for Windows（特别是Windows 10）上进行了测试。

更新：您可以尝试使用此代码here

Answer 1

将元素追加到页面后，可以应用焦点。在修改后的调查文本插件中，请尝试第63行：

$("#jspsych-survey-text-" + i +" textarea").focus();

这可能会使代码中的其他内容过时，但我没有尝试任何其他修改。

为什么自动对焦属性仅适用于首次试用？

1 个答案: