jQuery copy text into my clipboard from text of texarea - javascript

I have a textarea and I want When I move over text area it will show button and when I click this button it will copy text of text area into my clipboard. Just like mediafire.com. So, what can i do that. I tried to find some solution but it not helpful for me.
Thank.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<textarea id="myid">My text here</textarea>
</body>
</html>

I think it's a flash based with some javascript solution like this one :
https://github.com/zeroclipboard/zeroclipboard
My guess is that you can't access hardware like keyboard with javascript.

Started the search here and found http://www.steamdev.com/zclip

Related

something like "http://test:<a b>" is not getting displayed in text area in IE

Anything given inside a tag is not getting displayed in a particular text area in IE.
example : http://test:
Do you mean you wrote exactly http://test: and it is not displaying the text inside the tag? On my side it is displaying in IE 11.
Sample code:
<!DOCTYPE html>
<html>
<head>
<script>
function add_txt()
{
document.getElementById("t_area").value = "http://test:<a b>";
}
</script>
</head>
<body>
<textarea rows="4" cols="50" id="t_area">
</textarea>
<input type="button" value="add text" onclick="add_txt()">
</body>
</html>
Output:
It was recongnized as text so it can be displayed. If you try to add HTML inside textarea then it will not going to display. this is the behavior with all the browsers not just with IE.
So if you try to add a text it will surely display it.
You can try to make a test with above code. If your issue still persist then try to provide a sample code to produce the issue. I will try to make a test with it on my side.

Javascript :: Paste clipboard to textarea

<!DOCTYPE html>
<html>
<body>
<form action=# method=post name=test>
<textarea name=numb id=numb rows=4 cols=50></textarea>
<input type=submit>
</form>
<script>
window.onload=function(){
document.getElementById("numb").value = window.clipboardData.getData('Text');
}
</script>
</body>
</html>
Title is pretty much self explanitory... I want to be able to paste the clipboard to the textarea onload... seems like a simple task but for some reason it's not working :/
That seems like a huge security issue if your javascript could access users clipboard right of the bat on onLoad :) So at the moment that can't be done directly via javascript. Maybe you should think alternative routes to that problem, like guiding people how to paste to that field e.g. via keyboard shortcuts.

jQuery Appending text from an input into a div when a button is clicked

There's a good chance that might be a repeat question, but I couldn't find an answer that seemed to resolve my problem. I'm trying to make a jQuery bit where text is inputted into a text box, a button is clicked, and the text in the text box gets appended to a div. The end product is to make a game, but for now I'm just trying to make sure that the variable gets stored and put into the div. Here's my HTML
<!DOCTYPE html>
<html>
<head>
<title>Maybe a game maybe</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h2>Please enter your name.</h2>
<form name="userInput">
<input type="text" name="textInput"/>
</form>
<button id="confirm">Confirm</button>
<br/>
<div class="textOutput"></div>
</body>
</html>
Here's my CSS
h2 {
font-family:arial;
}
form {
display: inline-block;
}
.list {
font-family:garamond;
color:#cc0000;
}
And here's my jQuery
$(document).ready(function(){
$('#confirm').click(function() {
var playerName = $('input[name=textInput]').val();
$(".textOutput").append("<p>" + playerName + "</p>");
});
});
The idea is that text that gets inputted into the textInput box gets stored in the variable playerName. Then a <p> that contains playerName is appended to the .textOutput <div> when the confirm button is clicked. I'm using a Codecademy tutorial to help me confirm this. The code is almost exactly like the code in the tutorial. The only differences are the names of certain items, and the fact that the confirm button is a button and not a div. The code works perfectly fine in the tutorial, but when I try it in a normal editor, it doesn't work at all. I've even tried copying and pasting the exact code in the tutorial into my editor and still doesn't work. The editor I'm using is Sublime Text 2. I can't find what I'm missing here. Thank you very much in advance.
Please replace
<script type="text/javascript" src="script.js"></script>
with
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
and then try you code:
$(document).ready(function(){
$('#confirm').click(function() {
var playerName = $('input[name=textInput]').val();
$(".textOutput").append("<p>" + playerName + "</p>");
});
});
I presume you are saving it as text file.
You have to save the file as .html or .htm and wrap the script in <script> tag and wrap the css in <style> tag and then open it in a browser.
you need to include the jquery-library:
put e.g.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
inside the head-tag.
You do not have any jQuery libraries in the head tag.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
Your code works, as shown here. http://jsfiddle.net/haxtbh/2gMgQ/

broke my code into fiddle not appearing

i am planing to make my text box editable...
so i removed the id from the disabled code...
even i tested in fiddle its not working...
providing my cod below....
i am providing part of my code in fiddle i am not able to see the text box...
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
You have to use input instead of form:input, browser can render standard html tags and you have to provide standard html.
Live Demo
Change
<input id="behvrName" type="text" cssClass="icwText" path="" />
To
<input id="behvrName" type="text" cssClass="icwText" path="" />
cssClass and are also not standard attributes and you need to change them if you want them to be interpreted and act accordingly by browser. cssClass would be class.
spring:message and form:input are not plain HTML tags; rather, they are pseudo-tags processed by your server-side framework. If you want to use JSFiddle, you must use plain HTML.
Furthermore, your input's id is behvrName, but you're not selecting that. If you want to disable that input, use an appropriate selector $('#behvrName') in the JavaScript portion.

JQuery - placing the cursor at the end of a textarea when it is focused on

First, some of you may notice that I reposted this question after deleting it. This is because it was mistakenly marked as a duplicate by someone who didn't bother to check - the question he linked to was about an <input> element; that solution does not work for textareas.
Anyway, consider the following code:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function caek() {
$('textarea[name=txt1]').val("cake");
$('textarea[name=txt1]').focus();
}
</script>
</head>
<body>
<div id="bar"></div>
<form name="frm1" id="cake">
<textarea name="txt1"></textarea>
</form>
<input type="button" value="Activate"
onclick="caek()">
</body>
</html>
When you run that, you will notice that the cursor is pushed to the start of the textarea, before the text. How can I make it come after all the text, at the end of the textarea? A non-inline solution would be optimal, but anything will do.
And a standalone solution (no plugins etc) would be perfect.
This is working for me.
function caek() {
txtArea = $('textarea[name=txt1]');
txtArea.val("cake");
txtArea.focus();
tmpStr = txtArea.val();
txtArea.val('');
txtArea.val(tmpStr);
}
This works.
$ta.text($ta.text()).focus()
Demo: http://jsfiddle.net/elclanrs/WWsBa/
You can use the rangyinputs jQuery plugin to do this in a cross platform way.
There's a demo here:
http://rangyinputs.googlecode.com/svn/trunk/demos/textinputs_jquery.html
Set the start and end to the same number and it'll set the cursor to that point (though it doesn't focus the textarea, so you have to tab into it to see the effect). In your case, you'd want to set it to the length of the text.

Categories