为什么自动对焦属性仅在第一次试用时有效？

Question

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

在每个问题上，都会显示一个文本区域供用户键入 his/her 答案，并且此类文本区域必须立即获得焦点。

我修改了 survey-text 插件以通过按 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 元素，但出于某种原因，其中 none 个有效。
我也试过了按照建议 here ( 就该主题建议的其他解决方案也不起作用）。
正如你从我看到的代码，我正在尝试 "recover" 使用一个函数来获得焦点，该函数触发模糊。我也试过这种方法 onLoad()，没有两种情况下的结果。
我试过在在单个试验中嵌套时间线，而不是使用许多试验。也不走运。

我是不是漏掉了什么？

一些额外的注意事项：

正如您从这个问题的标签中猜测的那样，JQuery 和 HTML5 特定功能完全可以作为解决方案，以防自动对焦无法单独工作。不需要限制自己，玩得开心。

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

更新：您可以试试这个代码 here

Answer 1

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

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

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

为什么自动对焦 属性 仅在第一次试用时有效？

Why autofocus property works only on first trial?

html

javascript

jquery

jspsych

为什么自动对焦属性仅在第一次试用时有效？