The onclick button changes the default text in the text area

Question

The onclick button changes the default text in the text area

For a text box and two buttons:

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>

I want to click on the first button => the default text will appear in the "text1_contact1" textbox and if I click on another button => the default text will change in the "text2_contact2" textbox

now i have text when i click on the textbox it disappears (as the first step) but i want a different default text to be selected for each button click.

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

+3

javascript jquery html textarea

manu Apr 21 At 13:06

source to share

3 answers

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

Instead of creating global variables, you can use your own attribute on the tags themselves. Assign a custom attribute defaultValue

and manipulate it when the button is clicked. This way you only need to bind the blur and focus event once and just change the value textarea

by its attribute 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 defaultText attribute value
    $("#message").data('defaultValue',"text1_contact1");
});
$(document).on('click', '#button2', function(){
    //change textarea 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>

+1

Vijay Apr 21 15 at 13:18

source to share

You can change the value of the textarea with the jQuery function (you think you use it) $ .val ("what you want here"). This way you will have:

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

You can also use the placeholder attribute if you don't need to get the default value.

0

Outpox Apr 21 15 at 13:18

source to share

Guruprasad rao · Accepted Answer · 2015-04-21T13:22:33+0000

Something like that?

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

UPDATE

DEMO

Add an attribute data-default

totextarea

Then make below changes in 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;
    }
});

The onclick button changes the default text in the text area

More articles: