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;
}
});
}
source to share
Something like that?
<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
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;
}
});
source to share
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>
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.
source to share