使用jQuery从文本区域中删除初始文本

Question

我有一个通过Symfony使用以下代码构建的textarea：

控制器：

$form = $this->createFormBuilder($defaultData)
    ->add('name', 'text', array('label' => 'Name:'))
    ->add('email', 'email', array('label' => 'Email Address:'))
    ->add('subject', 'text', array('label' => 'Subject:'))
    ->add('message', 'textarea', array('label' => 'Message:'))
    ->getForm();

模板：

<div>
    {{ form_errors(form.message) }}
    <p class="label">{{ form_label(form.message) }}</p>
    {{ form_widget(form.message, { 'attr' : { 'class' : 'input', 'id' : 'message', 'rows' : '8' } }) }}
</div>

产生以下HTML：

<div>   
    <p class="label"><label for="form_message" class="required">Message:</label></p>
    <textarea id="form_message" name="form[message]" required="required"    class="input" id="message" rows="8">Type your message here</textarea>
</div>

现在，当重点关注文本区域时，我希望初始文本消失。 我只是不确定如何去做。 我试过了：

$("#message").focus(function() {
    if (this.text() == "Type your message here") {
        this.text("");
    }
});

但无济于事。

Answer 1

您的代码有几个问题。

首先，对于textarea，您不像其他许多表单对象那样使用.text() ，而是使用.val() 。 请像$(this)这样的焦点函数中引用对象，而不是仅引用this 。 最后，您的textarea具有2个ID的#message和#form_message ，仅使用1个ID，因此HTML结果为：

<div>   
  <p class="label"><label for="form_message" class="required">Message:</label></p>
  <textarea name="form[message]" required="required" class="input" id="message" rows="8">Type your message here</textarea>
</div>

而更正后的jQuery函数结果为：

$("#message").focus(function() {
    if ($(this).val() == "Type your message here") {
        $(this).val("");
    }
});