Is there a way to delete the label when I click into the textarea?
http://jsfiddle.net/1smvym84/4/
HTML:
<li id='field_1_9' class='gfield' >
<label class='gfield_label' for='input_1_9'>Place this inside the textarea</label>
<div class='ginput_container'>
<textarea name='input_9' id='input_1_9' class='textarea medium' tabindex='8' rows='10' cols='50'></textarea>
</div>
</li>
JQUERY:
$(document).ready(function(){
$('.textarea').text($('.gfield_label').text());
$('.gfield_label').remove();
});
Many thanks for any help :-)
If you want to delete it on focus:
$("#input_1_9").focus(function() {
$(this).parent("div").prev("label").remove();
});
I think what you are looking for is HTML's placeholder attribute:
<textarea name="input_9" id="input_1_9" class="textarea medium" tabindex="8" rows="10" cols="50" placeholder="Your text goes here"></textarea>
I think it will be better if you will use placeholders. Like this:
<textarea placeholder="Place this inside the textarea"></textarea>
But, if you want do it in JS it will be like this:
$('.textarea').on('click', function() {
$('.gfield_label').remove();
});
Try this:
$(document).ready(function(){
//work for all elements which have the css class textarea
$('.textarea').click(function(){
$('.textarea').val($('.gfield_label').html());
//if you want to remove all elements having gfield_label css class
$('.gfield_label').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<label class="gfield_label">this is label</label>
<textarea class="textarea"></textarea>
</form>
You probably want to delete it when entering then add it back if nothing is written. There are 2 ways to accomplish this:
The HTML5 way:http://jsfiddle.net/1smvym84/8/
$(document).ready(function(){
var placeholderText = $('.gfield_label').text();
$('.textarea').attr("placeholder",placeholderText);
$('.gfield_label').remove();
});
The jQuery way: http://jsfiddle.net/1smvym84/7/
$(document).ready(function(){
var placeholderText = $('.gfield_label').text();
$('.textarea').text(placeholderText);
$('.gfield_label').remove();
$('.textarea').focus(function(){
var $this = $(this);
if ($this.text() === placeholderText){
$(this).text("");
}
}).blur(function(){
var $this = $(this);
if ($this.text() === ""){
$(this).text(placeholderText);
}
})
});
If you are using the for attribute on the labels consistently, looking up the appropriate label to delete should be fairly easy:
$('.textarea').on("focus", function() {
var areaId = $(this).attr("id");
var areaLabel = $("label[for='" + areaId + "']");
// Get the content from the label
$(this).text(areaLabel.text());
// Remove the label
areaLabel.remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class='gfield_label' for='input_1_9'>Place this inside the textarea</label>
<div class='ginput_container'>
<textarea name='input_9' id='input_1_9' class='textarea medium' tabindex='8' rows='10' cols='50'></textarea>
</div>
Related
<input type="text" id="Amount" />
<lable id="copy_Amount" > </lable> $
Anything written in "Amount" input , need to written in lable
Pointing out some obvious flaws in the accepted answer. Mainly the use of onkeyup and innerHTML.
<input type="text" id="Amount" />
<!-- there is no lable tag. also label is not used as label so use span instead -->
<span id="copy_Amount"></span>
<script>
//can input text without keyup
document.getElementById("Amount").oninput = function(){
//no need for another lookup - use this
let stringValue = this.value;
//do not use innerHTML due to html injection
document.getElementById("copy_Amount").textContent = stringValue
}
</script>
use keyup event
Correct lable tag label
use text() to set label text
$('#Amount').keyup(function() {
$('#copy_Amount').text($('#Amount').val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="Amount" />
<label id="copy_Amount" > </label> $
You can do this using JQuery.
$('#Amount').change(function() {
$('#copy_Amount').text($('#Amount').val());
});
You can try this
<script>
document.getElementById("Amount").onkeyup = function () {
var stringValue = document.getElementById("Amount").value;
document.getElementById("copy_Amount").textContent = stringValue;
}
</script>
For example when somebody inputs text and presses submit I want the text to be displayed in an h1 tag.
<div>
<label for="message"> Message:</label>
<input type="text" id="message" name="message" class="m3">
<button id="btn1" class="butt">Ready to Send?</button>
<h1 id="test">Header</h1>
</div>
$(document).ready(function() {
$('btn1').click(function() {
$('#test').text($("#message").val());
});
});
$(document).ready(function() {
$('#btn1').click(function() {
$('#test').text($("#message").val());
//--> if you want to remove the value of the input after parsing the code, simply check if
//--> not `null` or not `undefined` by placing the selector.val() in your if conditional...
if($("#message").val()){
$("#message").val('');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label for="message"> Message:</label>
<input type="text" id="message" name="message" class="m3">
<button id="btn1" class="butt">Ready to Send?</button>
<h1 id="test">Header</h1>
</div>
You did not add the # selector in JQuery for ID
$(document).ready(function() {
$('#btn1').click(function() {//<-- Make sure to add the ID selector # in Jquery
$('#test').text($("#message").val());
});
});
$(document).ready(function () {
$('#btn1').click(function (e) {
e.preventDefault();
$('#test').html($("#message").val());
});
});
This would work fine, but like #Teemu says this removes the form functionality. If you want to add a check mechanism you can use something like this:
$(document).ready(function () {
$("#message").keyup(function() {
$("#test").html($("#message").val());
});
});
I have seen tons of question that are close but it seems I am missing something.
I am appending an html div tag when a button is clicked. The appended div tag has a textarea tag that should get focus.
the script:
$('.todosContainer').on('click', '.ion-ios-close-outline', function () {
let myTodoTemplate = `
<div class="oneTodoTemplate attached">
<textarea id="todoInput" name="name" placeholder="what shall be done?" rows="1" cols="80"></textarea>
</div> `;
$('.todosContainer').append(myTodoTemplate);
$('.attached').fadeIn(400).first().focus();
}
I also tried:
$('.attached').fadeIn(400, function() {
$(this).find(">:first-child").focus();
});
The html:
<div class="todosContainer">
</div>
You need an instance of the added html, you can do it by appending precreated html with jquery. Before add hide it, fade it in, wait till finish and focus.
$('.todosContainer').on('click', '.add', function() {
let myTodoTemplate = $('<div class="oneTodoTemplate attached"><textarea id="todoInput" name="name" placeholder="what shall be done?" rows="1" cols="80"></textarea></div>');
myTodoTemplate.hide();
$('.todosContainer').append(myTodoTemplate);
myTodoTemplate.fadeIn(400, function() {
myTodoTemplate.find('textarea').focus();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="todosContainer"> <span class="add">ADD</span> </div>
I have no idea why everyone is using 'find'. This works for me:
$('.todosContainer').on('click', function () {
let myTodoTemplate = `
<div class="oneTodoTemplate attached">
<textarea id="todoInput" name="name" placeholder="what shall be done?" rows="1" cols="80"></textarea>
</div> `;
$('.todosContainer').append(myTodoTemplate);
$('#todoInput').fadeIn(400,function () {$('#todoInput').focus();})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="todosContainer">
Click me
</div>
Note you're missing a ')' in you're question, make sure you didn't miss that. Also, you will get infinite text boxes with the same ID this way (every click) - consider making an id per click, and maintaining a counter.
You are focusing on the class attached. Instead you have to focus on textarea i.e. todoInput
$('.todosContainer').on('click', '.attached', function() {
let myTodoTemplate = $('<div class="oneTodoTemplate attached"><textarea id="todoInput" name="name" placeholder="what shall be done?" rows="1" cols="80"></textarea></div>');
myTodoTemplate.hide();
$('.todosContainer').append(myTodoTemplate);
myTodoTemplate.fadeIn(400, function() {
myTodoTemplate.find('textarea').focus();
})
$(this).find("#todoInput").focus();
});
attached is a class associated with wrapper div. So it will not get focused. Please try with following code:
$('.todosContainer').on('click', '.ion-ios-close-outline', function () {
let myTodoTemplate = '
<div class="oneTodoTemplate attached">
<textarea id="todoInput" name="name" placeholder="what shall be done?" rows="1" cols="80"></textarea>
</div> ';
$('.todosContainer').append(myTodoTemplate);
$('.attached').fadeIn(400).find("#todoInput").focus();
});
Try with find() .Because its children of .attached div
$('.todosContainer').on('click', '.attached', function() {
$(this).find('textarea').focus();
// or
//$(this).find('#todoInput').focus();
});
Try Code:
.todosContainer
{
color:Red;
}
.attached
{
}
.oneTodoTemplate
{
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function(){
$('.todosContainer').click(function(){
$('.todosContainer').fadeOut();
var myTodoTemplate ='<div class="oneTodoTemplate attached"><textarea id="todoInput" name="name" placeholder="what shall be done?" rows="1" ls="80"></textarea> </div>';
$('.todosContainer').append(myTodoTemplate);
$('#todoInput').first().focus();
$('.todosContainer').fadeIn(200);
});
});
</script>
<div class="todosContainer" >
click
</div>
How can I get a value from many different textarea tags with same IDs using jQuery? I also need to allow the user a choice of which textarea he/she wants to add a comment, and then get the comment.
This is my HTML
<div class="container">
<div class="wall_post">
<p>First Post</p>
<textarea id="user_comment" class="form-control" placeholder="Type your comment here"></textarea>
</div>
<div class="wall_post">
<p>Second Post</p>
<textarea id="user_comment" class="form-control" placeholder="Type your comment here"></textarea>
</div>
<div class="wall_post">
<p>Third Post</p>
<textarea id="user_comment" class="form-control" placeholder="Type your comment here"></textarea>
</div>
<div class="wall_post">
<p>Fourth Post</p>
<textarea id="user_comment" class="form-control" placeholder="Type your comment here" ></textarea>
</div>
</div>
And this is my jQuery so far
This jQuery only prints out the first textarea value, but is ignoring the others.
$(document).on('keydown', function(e) {
var targetInput = $('#user_comment');
if(!targetInput.is(document.activeElement)) {
alert('Typed while not focused on #myInput!');
}else{
if(e.which == 13){
alert(targetInput.val());
targetInput.val('');
}
}
});
Thank you in advance!
Ids must be unique. You can rather use classname.
Also you can use target to get current keydown element:
$(document).on('keydown', function(e) {
var targetInput = $(e.target);
if(!targetInput.is('textarea')) {
alert('Typed while not focused on #myInput!');
}else{
if(e.which == 13){
alert(targetInput.val());
targetInput.val('');
}
}});
Working Demo
As ID's are expected to be unique jQuery will return the first element, not a list of all with that ID.
To access all of your textareas you could use this selector (assuming there is only a single text area with each wall_post div:
$('.wall_post textarea')
You could bind your keydown event to this instead as well:
$(document).on('keydown', '.wall_post textarea', function(e) {
// do whatever you need to with this textarea
});
How to add watermarks like "Enter textarea" for a textarea.
<textarea rows = "8" cols = "18" border ="0" class="input" style="border: none;" WRAP id="details" name ="details"></textarea>
Thanks..
I think you mean placeholder?
In HTML5:
<textarea placeholder="Enter textarea"></textarea>
In HTML4:
<textarea onclick="if (this.value == 'Enter textarea') this.value = '';">Enter textarea</textarea>
here is the code
<input type="text" name="q" size="25" maxlength="255" value=""/ class="googlesearch" onfocus="if(this.value != '') this.className = 'googlesearch2'" onblur="if(this.value == this.defaultValue) this.className = 'googlesearch'" />
from link
hope that will help.
i have written a jquery code for my purposes.
i think it might be excellent for your problem
to use it for any of your textarea/text field, you just have to add 'watermark' class & add 'placeholder' attribute with the watermark value to it.
e.g <textarea rows="2" placeholder="Post your question here" name="query_area" id="query_area" class="watermark">Post your question here</textarea>
the jquery code is as below.
$(document).ready(function(){
$(".watermark").each(function(){
$(this).val($(this).attr('placeholder'));
});
$(".watermark").focus(function(){
var placeholder = $(this).attr('placeholder');
var current_value = $(this).val();
$(this).css('color', '#192750');
if(current_value == placeholder) {
$(this).val('');
}
});
$(".watermark").blur(function(){
var placeholder = $(this).attr('placeholder');
var current_value = $(this).val();
if(current_value == '') {
$(this).val(placeholder);
$(this).css('color', '#676767');
}
});
})
There are many solutions. One of them is that all form elements have <label for="XX"> and all elements have <element id="XX"> so that you know to which element label belongs. Then in CSS you hide some labels, and with JS you check all hidden labels, and write label title/content to the form elements, if that element is empty. Then with JS you show and hide this text based on hover and inputed text.
Here is a nice one using jQuery
jQuery Watermark