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

fiddle: http://jsfiddle.net/2k22h3hy/2/

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

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 2

您可以使用 jQuery 函数（您似乎在使用它）$.val("what you want here") 来更改文本区域的值。所以你会：

//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("");
});

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

Answer 3

是这样的吗？

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

为您的 textarea

添加 data-default 属性

然后对您的 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;
    }
});

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

onclick button changes default text in text area

html

javascript

jquery

textarea