We Keep Coding

Copy text to clipboard from hidden input is not working in jQuery

I have the following code to copy a text to the clipboard by clicking on a Button. Text is in a Paragraph element, So I move that text to a hidden input field and then copy it to the clipboard. But this is only working if I move the text to a text field but not a hidden field. I also tried to display:none the input field, but the result is the same. (I can't set it to visibility:hidden because the space matters). How can I solve this?
$("button").on("click", function() {
var n = $("p").text();
n = $.trim(n);
$(".copied").attr("value", n).select();
document.execCommand("copy");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
This is the copied text!
</p>
<input type="hidden" class="copied"/>
<button>
COPY
</button>
<input type="text" placeholder="paste copied text here"/>
Here is the editable jsfiddle:
http://jsfiddle.net/d9a4x6vc/

You can try to change the type of the input to text before select then, and bring the type hidden back after like that.
$("button").on("click", function() {
var n = $("#copyMe").text();
$(".copied").attr("value", n);
$(".copied").attr("type", "text").select();
document.execCommand("copy")
$(".copied").attr("type", "hidden")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="copyMe">
This is the copied text!
</p>
<input type="hidden" class="copied"/>
<button>
COPY
</button>
<input type="text" placeholder="paste copied text here"/>

I had exactly the same problem recently. What I did is put that input box position as absolute and moved it off screen. Also notice that even input field width does affect result. I tried to put width and height to 0, and it didn't copy after that also.

As DavidDomain explains in answer to a similar question, you need to change your input properties to take the value.
In your case, you can try this:
$("button").on("click", function() {
var n = $("p").text();
n = $.trim(n);
$(".copied").css({
position: "absolute",
left: "-1000px",
top: "-1000px"
}).attr("value", n).attr("type","text").select();
$(".copied").attr('css','').attr("type","hidden");
document.execCommand("copy");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
This is the copied text!
</p>
<input type="hidden" class="copied"/>
<button>
COPY
</button>
<input type="text" placeholder="paste copied text here"/>

jquery placeholder text for input form

I'm using jquery placeholder text for a search placeholder. This search field doesn't have any placeholder so i added this text.
$(document).ready(function(){
$('.mfilter-search').find("input[type=text]").each(function(ev)
{
if(!$(this).val()) {
$(this).attr("placeholder", "Refine Your Search");
}
});
});
i don't know it's the best way to add a placeholder using jquery. If anyone know more simple way please add your code it will be very helpful.

You can directly set the placeholder no need to check value and use .each()
$('.mfilter-search input[type=text]').attr("placeholder", "Refine Your Search")
If you want to place on first then use
$('.mfilter-search input[type=text]:first').attr("placeholder", "Refine Your Search")

You can simply use find method using value attribute
$('.mfilter-search').find("input[type=text][!value]").attr("placeholder", "Refine Your Search");

you can add placeholder attribute directly in your html element like this
<input type="text" name="fname" placeholder="search">
or you can add a class to all your element that you need to put placeholder eg:- .placeholder and add placeholder attribute in javascript like this.
$(".placeholder").attr("placeholder", "Type here to search");
or you can use plugins like these.
http://andrewrjones.github.io/jquery-placeholder-plugin/ or
https://github.com/mathiasbynens/jquery-placeholder or refer this site for different placeholder plugins.
https://www.sitepoint.com/top-5-jquery-html5-placeholder-plugins/
and your code is also good. We can do that way too.
hope this will work.

Try this code
$(document).ready(function(){
$('.mfilter-search').find("input[type=text]").each(function(ev)
{
var txt = $(this).data('placeholder');
$(this).attr('placeholder', txt);
});
});

For place holder no need complex method function in jquery simply use like this
<input type="text" placeholder = "Zipcode" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Zipcode'" name="zipcode" class="form-control" maxlength='10'>

try this. this is how you can add place holder if you have two input fields with same class name.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
first name :<input type="text" name="firstname" class="tfield" id="field0">
last name :<input type="text" name="lastname" class="tfield" id="field1">
</body>
<script type="text/javascript">
$(document).ready(function(){
var thelength = $(".tfield").length;
for(var i=0;i<thelength;i++)
{
var theid = $("#field"+i);
var thename = theid.attr("name");
alert(thename);
if(thename == "firstname")
{
theid.attr("placeholder","name");
}
}
});
</script>
</html>

Can't add text to textarea on click

I have a table of element, and when i click on a td, i show something on atextarea
the problem is when i click, nothing show on the textarea...
what i actually do is that :
td.onclick = (function(textToShow){
return function(){
var textArea = document.getElementById("modification_bloc");
textArea.value = textToShow;
}
})(structure[key])
HTML code (is .ejs)
<form id="modification_bloc" action="modification_bloc" name="modification_bloc" class="hidden" type="post">
<textarea name="contenu_bloc" id="contenu_bloc"></textarea>
<br />
<input type="submit" value="Sauvegarder modifications"/>
</form>
the problem is that my textarea is always empty....
If i do a console.log of "textToShow" i have the text, and if i add the text as a placeholder i can see it in the console but not on the textarea. The innerHTML method works, but the text is obviously not editable ç^^
I don't get what is wrong.
can you help me? without JQUERY :)

javascript real-time update from 1 text area to multiple textarea

I want to have 1 main textarea where you can type anything and it will, in real-time, update on multiple textareas showing the typed letters in different fonts.
example:
Main text area:
<textarea id="textField0" autocomplete="off" style="font-family:'Alex Brush';"
onkeyup="javascript:setFontText(this.value);" rows="2" name="textField0"></textarea>
Multiple text area:
<textarea id="Courier new" class="fontTextArea2" style="font-family:courier_newregular;"
autocomplete="off" name="Courier new"></textarea>
<textarea id="Arial Black" class="fontTextArea2" style="font-family:arialblack; "
autocomplete="off" name="Arial Black"></textarea>
How do i go about writing javascript for setFontText()?
Thanks!

You could do something like this:
function setFontText(text) {
document.getElementById("Courier_new").innerHTML = text;
document.getElementById("Arial_Black").innerHTML = text;
}
I would also suggest you change your ids to something that doesn't contain white spaces.
Example: http://jsfiddle.net/3Lq0ykyk/1/

Ive taken the event handler from inline to javascript, Just make the font's you want in css
var areatwo=document.getElementById('two');
var areathree=document.getElementById('three');
document.addEventListener('keydown',setFontText);
document.addEventListener('keyup',setFontText);
function setFontText(){
var textareavalue=document.getElementById('one').value;
areatwo.value=textareavalue;
areathree.value=textareavalue;
}
#two{font-family:courier_newregular;}
#three{font-family:arialblack; }
<textarea id="one"></textarea>
<textarea id="two"></textarea>
<textarea id="three"></textarea>

Displaying textarea content on click of button

I am having a text area and a button.Like this :
<textarea id="txtarea"></textarea>
<input type="button" value="add text" id="add" />
Now,what i want to do is that on click of the button that text to be displayed on the same page above this text area just like we do comment or answer a question on stackoverflow.
How this can be done ?Please help.

you can do this using javascript
add any tag before (generally div or span tag is used) textarea tag
<div id="adduserdata"></div>
<textarea id="txtarea"></textarea>
<input type="button" value="add text" id="add" onclick="showtext()" />
Javascript code would be
function showtext(){
var text = document.getElementById("txtarea");
var showarea = document.getElementById("adduserdata");
showarea.innerHTML=text.value;
}
here is working example

As what you want, thus appending to the <div> division element, I assume that you will accept this answer (as a summary to all the comments and answers above) :
<!-- This is the HTML Part -->
<div id="text"></div>
<textarea id="new"></textarea>
<input type="button" onclick="appendTextToDiv();" />
<script>
function appendTextToDiv(){document.getElementById("text").innerHTML = document.getElmentById("text").innerHTML + document.getElementById("new").value;}
</script>
This can let you simply append it to the text. Fiddle

This will do if using Jquery (and previously text will stay) :
$('.button').click(function(){
var text = $('textarea').val();
if(text!=''){
$('p').text(text);
}
});
or like this:
$('.button').click(function(){
var text = $('textarea').val();
if(text!=''){
$('<p></p>').text(text).insertBefore('textarea');
}
});
Fiddle