Question

给出一个textarea和两个按钮如下：

HTML

<ul style="text-align:center;">
 <li class="button btn btn-outline button-exclusive" id="button1">
        <div style="font-size:16px;text-align:text-align:center;">
           <span class="buttonIconSupport">Contact 1</span>
        </div>
    </li>
<li class="button btn btn-outline button-exclusive"  id="button2">
           <span class="buttonIconTeam">contact2</span>
</li>
</ul>

<textarea class="form-control" id="message" name="message" style="height:200px;width:765px">text1_contact1</textarea>

我想点击第一个按钮=＆gt;一个默认文本出现在textarea＆＃34; text1_contact1＆＃34; 如果我点击另一个按钮=＆gt; textarea＆＃34; text2_contact2＆＃34;

中的默认文本发生了变化

现在我有一个文本，当我点击textarea它消失（作为第一步）但我想为每个按钮点击一个不同的默认文本。

JQUERY

$(document).on('click', '#button1', function(){
$("#message").focus(function() {
    if (this.value === this.defaultValue) {
        this.value = '';
    }
  })
  .blur(function() {
    if (this.value === '') {
        this.value = this.defaultValue;
    }
});
}

Answer 1

这样的东西？

<强> DEMO

<ul style="text-align:center;">
 <li class="button btn btn-outline button-exclusive" data-default="text1_contact1" id="button1">
        <div style="font-size:16px;text-align:text-align:center;">
           <span class="buttonIconSupport">Contact 1</span>
        </div>
    </li>
<li class="button btn btn-outline button-exclusive" data-default="text2_contact2"  id="button2">
           <span class="buttonIconTeam">contact2</span>
</li>
</ul>
<textarea class="form-control" id="message" name="message" style="height:200px;width:765px">text1_contact1</textarea>

JS

$(document).on('click', '#button1', function(){
    $("#message").val($(this).data('default'));
    setFunctionality();

});


$(document).on('click', '#button2', function(){
    $("#message").val($(this).data('default'));
    setFunctionality();
    });

function setFunctionality()
{
    $("#message").focus(function() {
    if (this.value === this.defaultValue) {
        this.value = '';
    }
  })
  .blur(function() {
    if (this.value === '') {
        this.value = this.defaultValue;
    }
});
}

<强>更新

<强> DEMO

在data-default

中添加textarea属性

然后对您的JS进行以下更改

$(document).on('click', '#button1', function(){
    $("#message").val($(this).data('default'));
    $("#message").data('default',$(this).data('default'));
});

$(document).ready(function(){
   $("#message").val('text1_contact1');
    $("#message").data('default','text1_contact1');
});

$(document).on('click', '#button2', function(){
    $("#message").val($(this).data('default'));
   $("#message").data('default',$(this).data('default'));
    });

    $(document).on('focus','#message',function() {
        console.log(this.value + ' ' + this.defaultValue);
    if (this.value === $(this).data('default')) {
        this.value = '';
    }
  }).on('blur','#message',function() {
    if (this.value === '') {
        this.value = this.defaultValue;
    }
});

Answer 2

小提琴：http://jsfiddle.net/2k22h3hy/2/

您可以在标记本身中使用自定义属性，而不是创建全局变量。分配defaultValue自定义属性并在按钮单击时对其进行操作。这样，您只需将模糊和焦点事件绑定一次，只需将textarea值更改为defaultValue属性。

JS：

$("#message").focus(function() {
        //empty the textarea
        this.value = '';
  })
  .blur(function() {
        //change textarea text to default text
        this.value = $(this).attr('data-defaultValue');
});
$(document).on('click', '#button1', function(){
    //change textarea's defaultText attribute value
    $("#message").data('defaultValue',"text1_contact1");
});
$(document).on('click', '#button2', function(){
    //change textarea's defaultText attribute value
    $("#message").data('defaultValue',"text1_contact2");
});

HTML：

<ul style="text-align:center;">
 <li class="button btn btn-outline button-exclusive" id="button1">
        <div style="font-size:16px;text-align:text-align:center;">
           <span class="buttonIconSupport">Contact 1</span>
        </div>
    </li>
<li class="button btn btn-outline button-exclusive"  id="button2">
           <span class="buttonIconTeam">contact2</span>
</li>
</ul>

<textarea class="form-control" id="message" name="message" style="height:200px;width:765px" data-defaultValue="text1_contact1">text1_contact1</textarea>

Answer 3

您可以使用jQuery函数更改textarea值（因为它似乎使用它）$ .val（“你想要的”）。所以你会：

//On button click, define a default value for the textarea
$("#button1").on('click', function(){
    $("#message").val("text1_contact1");
});

//On textarea focus clear the content
$("#message").focus(function(){
    $("#message").val("");
});

如果您不需要检索默认值，也可以使用占位符属性。

onclick按钮更改文本区域中的默认文本

3 个答案: