我需要为显示简单数学问题的 JsPsych 实验编写大量试验代码。用户必须尽快在文本框中回答，然后按 Enter 键移动到下一个问题。等等。
在每个问题上，都会显示一个文本区域供用户输入他/她的答案，并且该文本区域必须立即获得焦点。
我已经修改了 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 元素，但由于某种原因，它们都不起作用。 - 我也试过 按照建议使用计时器聚焦文本区域 here ( 就该主题建议的其他解决方案也不起作用)。
- 正如你从我那里看到的 代码，我正在尝试使用一个函数“恢复”焦点，该函数 触发模糊。我也试过这种方法 onLoad()，没有 两种情况下的结果。
- 我试过在 在单个试验中嵌套时间线，而不是使用许多试验。 也不走运。
我错过了什么吗？
一些额外的注意事项:
正如您可以从这个问题的标签中猜到的那样，JQuery 和 HTML5 特定函数是完全允许作为解决方案的，以防自动对焦无法单独工作。无需限制自己，玩得开心。
此行为已在适用于 Ubuntu 16 的最新版 Firefox 以及适用于 Windows 的最新版 Chrome(特别是 Windows 10)上进行了测试。
更新:您可以尝试此代码 here
最佳答案
您可以在将元素附加到页面后应用焦点。在您修改过的调查文本插件中，在第 63 行试试这个:
$("#jspsych-survey-text-" + i +" textarea").focus();
这可能会使代码中的其他内容过时，但我没有尝试任何其他修改。
关于javascript - 为什么自动对焦属性仅在第一次试用时有效？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38853840/