javascript - onclick按钮更改textarea中的默认文本

Question

给定一个文本框和两个按钮如下:

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>

我想点击第一个按钮 => 默认文本出现在文本区域“text1_contact1” 如果我点击另一个按钮 => 文本区域“text2_contact2”中的默认文本更改

现在我有一个文本，当我单击文本区域时它会消失(作为第一步)，但我希望每个按钮单击都有不同的默认文本。

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