为什么自动对焦属性仅在首次试用时起作用？

debugcn 发表于 Dev

N7机甲

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

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

我已经修改了Survey-Text插件，以按Enter继续进行试验，并在创建每个文本框时添加了autofocus属性。问题是自动对焦仅适用于第一次试用，而其余部分则停止工作。

下面提供了代码（为了正常工作，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元素，但由于某些原因，它们都不起作用。
我已经使用定时器焦点文本区域也试过了，建议在这里（建议该主题没有工作，没有其他的解决方案）。
如您从我的代码中看到的，我正在尝试使用一个函数来“恢复”焦点，该函数在Blur上触发。我也尝试过onLoad（）这样的方法，在两种情况下都没有结果。
我尝试在单个试验中的嵌套时间轴上显示问题，而不是使用许多试验。也没有运气。

我想念什么吗？

一些额外的注意事项：

从这个问题的标签可以猜到，如果无法单独实现自动对焦，则完全允许使用JQuery和HTML5特定功能作为解决方案。无需限制自己，玩得开心。

此行为已在适用于Ubuntu 16的最新版本Firefox和适用于Windows的最新版本的Chrome（特别是Windows 10）上经过测试。

更新：您可以在这里尝试此代码

乔什·德吕

将元素追加到页面后，可以应用焦点。在修改后的Survey-Text插件中，在第63行尝试以下操作：

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

这可能会使您在代码中拥有的其他东西过时，但是我没有尝试任何其他修改。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-28

我来说两句

0条评论

登录后参与评论

来自分类Dev