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

Why autofocus property works only on first trial?

本文关键字：第一次有效属性为什么更新时间：2023-09-26

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

在每个问题上，显示一个单独的文本区域供用户键入他/她的答案，并且该文本区域必须立即具有焦点。

我修改了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元素，但由于某种原因，它们都不起作用。
你可以从我的代码，我试图"恢复"的焦点使用一个函数，其中模糊触发。我也尝试过这样的方法onLoad()，没有这两种情况的结果。
我试过在屏幕上显示问题在单个试验中嵌套时间线，而不是使用多个试验。也不走运。

我错过了什么吗?

附加说明:

你可以从这个问题的标签中猜到，JQuery和HTML5的特定功能完全可以作为解决方案，以防自动对焦本身无法实现。没必要约束自己，玩得开心点。

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

更新:你可以试试这里的代码

您可以在将元素附加到页面后应用焦点。在修改后的survey-text插件中，尝试在第63行:

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

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