0

我有以下 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>');
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...');
});

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

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

编辑：

正如评论中所指出的，将类更改为 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;

然后在 then 循环中添加 ctr +1 。

这假设进行了重申并将解决 ID 问题。

如果你喜欢 500 textareas，如果你想打电话给第 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 回答