0

IE10を使用しているときに、プレースホルダー値を使用してフォーカス時にプレースホルダーテキスト値が消えないという問題を解決するのに役立つ次のtextarea htmlがあります

<textarea id="answerText" name="answerText" placeholder="Your answer here..." onfocus="this.placeholder = \'\'" onblur="this.placeholder = \'Your answer here...\'">@answer.Text</textarea>

これは最初の回答で期待どおりにレンダリングされますが、javascript を使用して 2 番目の回答にテキストエリアを追加しようとすると、テキストエリアをクリックするとプレースホルダーの値が残るため、onfocus イベントと onblur イベントが機能していないようです。ここに私のコードがあります:

 $('#answerList').append('<li><div class="row"><div class="eight columns"><textarea id="answerText" name="answerText" placeholder="Your answer here..." onfocus="this.placeholder = \'\'" onblur="this.placeholder = \'Your answer here...\'"></textarea></div><div class="four columns"><input type="checkbox" name="correctCheckbox" id="correctAnswerCheckbox' + answerPosition + '" value="' + answerPosition + '"/><label for="correctAnswerCheckbox' + answerPosition + '">Correct Answer</label></div></div></li>');
4

3 に答える 3

0

代わりにこれを試してください：

var $newField = $('<li><div class="row"><div class="eight columns"><textarea class="answerText" name="answerText" placeholder="Your answer here..."></textarea></div></div></li>').appendTo('#answerList');
$newField = $newField.find('.answerText');
$newField.on('focus', function() {
    $(this).attr('placeholder', '');
});
$newField.on('blur', function() {
    $(this).attr('placeholder', 'Your answer here...');
});

最初のページのレンダリング後にインライン ハンドラーが登録されないと仮定します。

私は一般的に、dom にインライン化するのではなく、js ファイルでイベント処理を管理する方が効果的だと考えています。したがって、インライン イベント ハンドラを使用する特別な理由がない場合は、使用しないことをお勧めします。

編集：

コメントで指摘されているように、クラスを ID に変更しました。

于 2013-09-01T19:50:08.723 に答える
0

コードをあまり変更したくない場合は、何らかの方法で異なる ID を与えるカウンターを追加してみてください。

var ctr=0;

$('#answerList').append('<li><div class="row"><div class="eight columns"><textarea id="answerText'+crt+'" name="answerText" placeholder="Your answer here..." onfocus="this.placeholder = \'\'" onblur="this.placeholder = \'Your answer here...\'"></textarea></div><div class="four columns"><input type="checkbox" name="correctCheckbox" id="correctAnswerCheckbox' + answerPosition + '" value="' + answerPosition + '"/><label for="correctAnswerCheckbox' + answerPosition + '">Correct Answer</label></div></div></li>');

ctr++; /// ctr +1;

次にループに ctr +1 を追加します。

これは、繰り返しが行われていることを前提としており、ID の問題を解決します。

500textareasのようなものがある場合、300 番目を呼び出したい場合は、次のようにします。 $('textarea[id*="300"]')

または、それらすべてを他のものと組み合わせて呼び出したい場合は、次のようにします。

$('textarea[id*="answerText"]')
于 2013-09-01T19:51:36.690 に答える
0

私の知る限り、プレースホルダーの予想される動作は、ボックスに何かが入力されるまで消えないことです。

ただし、それでもフォーカス/ぼかしで表示/非表示にしたい場合は、textarea 要素に何らかのクラスを割り当て、javascript コードからフォーカス イベントとぼかしイベントをバインドすることをお勧めします。

私は自分の主張を説明するためにこのフィドルを作りました。

<textarea id="answerText" name="answerText" placeholder="Your answer here..." class="answer">@answer.Text</textarea>


$('#add').on('click', function(){
    $('<textarea class="answer" placeholder="text here" ></textarea>').appendTo('#answers');
});
//#answers is the container for the answers
$('#answers').on('focus', '.answer', function(){
    this.placeholder = '';
});

$('#answers').on('blur', '.answer', function(){
    this.placeholder = 'text here';
});

このようにして、コードはより保守しやすく分離され、副作用として、発生している問題を回避できます。

于 2013-09-01T19:51:40.957 に答える