Question

我有以下textarea html来帮助解决占位符文本值在使用IE10时使用占位符值在焦点上消失的问题

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

这是第一个答案的预期呈现，但是当尝试使用javascript为第二个答案附加textarea时，onfocus和onblur事件似乎不起作用，因为当我点击textarea时，占位符值仍然存在。这是我的代码：

 $('#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>');

Answer 1

试试这个：

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...');
});

我假设内联偶数处理程序在初始页面呈现后没有注册。

我通常发现在js文件中管理事件处理更有效，而不是将它们内联到dom中。因此，如果没有使用内联事件处理程序的特殊原因，则id建议不要。

编辑：

将类更改为ID，如评论中所述。

Answer 2

如果您不希望在代码中进行太多更改，可以尝试添加一个计数器，以便为它们提供不同的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问题。

如果您想要500 textareas，如果您想拨打第300，您可以： $('textarea[id*="300"]')

或者如果您希望将其他所有人称为其他人：

$('textarea[id*="answerText"]')

Answer 3

据我所知，placeholder的预期行为不会消失，直到在框中输入内容为止。

但是，如果您仍想让它在焦点/模糊时显示/隐藏，我建议将一些类分配给textarea元素，并将焦点和模糊事件与javascript代码绑定。

我做了fiddle来说明我的观点。

<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';
});

通过这种方式，代码将更加可维护和解耦，作为副作用，您将避免遇到的问题。

附加innerHTML的问题

3 个答案: