シンプルな数学の質問を表示するJsPsych実験では、数多くの試行をコーディングする必要があります。ユーザーはテキストボックスでできるだけ早く応答し、Enterキーを押して次の質問に移動する必要があります。等々。なぜオートフォーカスのプロパティは最初の試行でのみ機能しますか？
各質問では、ユーザーが回答を入力するための1つのテキストエリアが表示され、そのようなテキストエリアにはすぐにフォーカスが必要です。
私は、テキストボックスの作成時にオートフォーカスプロパティを追加するだけでなく、Enterキーを押してトライアルを続けるようにsurvey-textプラグインを変更しました。問題は、オートフォーカスが最初の試行でのみ機能し、残りの部分では機能しなくなることです。
コードが（動作するために、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のことを知っている）
私が試したスタッフ：
- 同様の質問の多くは、DOM 要素を処理するために
getElementById()方法、またはgetElementsByTagName()の使用を示唆し、それらのどれもが機能しないいくつかの理由があります。 - また、here（ は、そのトピックで提案されている解決策はどちらもうまくいきませんでした）のように、テキスト領域をフォーカスするためにタイマを使用して を試しました。
- 私の コードからわかるように、私はぼかしで がトリガする関数を使ってフォーカスを "回復"しようとしています。私はまた、両方の場合で の結果がないonLoad（）のようなアプローチを試みました。
- 多くの試行を使用する代わりに、 ネストされたタイムラインの質問を1回の試行内で表示しようとしました。 運がない
何か不足していますか？
いくつかの余分な注意事項：この質問のタグから推測できるとおり
は、jQueryとHTML5特有の機能は完全に独自にオートフォーカスを機能させることは可能でない場合には、解決策として許可されています。あなた自身を制限する必要はなく、楽しんでください。
この動作は、Ubuntu 16の最新バージョンと、Chrome for Windowsの最新バージョン（特にWindows 10）でテストされています。
UPDATE：あなたはページに要素を追加した後、あなたがフォーカスを適用することができますhere
jsfiddleなどで問題を再現できますか？ – CNKR
ブラウザの開発者ツールで、テキストエリアの「オートフォーカス」属性が実際に存在するかどうかを確認できます。おそらくそれは後で何とか上書きされます。ちょうど推測。 – Kris
@ user3498863質問を編集してリンクを追加しました。そこにコードを試すことができます。 –