How to modify text when copyng to Clipboard using ZeroClipboard? - javascript

I'm trying to use zeroclipboard 2.2.0.
This example copies div content to the Clipboard on button click.
<html>
<head>
<script type="text/javascript" src="bower_components/zeroclipboard/dist/ZeroClipboard.min.js"></script>
</head>
<body>
<input id="textholder" value="some text" />
<button id="button1" data-clipboard-target="textholder">Copy from div to Clipboard</button>
<script>
var zeroClipboard = new ZeroClipboard();
zeroClipboard.clip(document.querySelector("#button1"));
</script>
</body>
</html>
How to modify copied text in order to get, for example, "some text [copied]" instead of just "some text" on paste?

You can use setText() function on your zeroClipboard, instead of just clipping the button. So you can create a variable where you get the text stored in your textfield and then modify it. This would be something like:
<html>
<head>
<script type="text/javascript" src="bower_components/zeroclipboard/dist/ZeroClipboard.min.js"></script>
</head>
<body>
<input id="textholder" value="some text" />
<button id="button1" data-clipboard-target="textholder">Copy from div to Clipboard</button>
<script>
var zeroClipboard = new ZeroClipboard();
var text = //select your textfield and add modifications to the text
zeroClipboard.setText(text);
zeroClipboard.clip(document.querySelector("#button1"));
</script>
</body>
</html>
Hope it helps =)

Related

not able to import js code in a html code and make it document.write something to it

html:
<html>
<header><title>This is title</title></header>
<body>
<!--<script src="h.js"></script>-->
<input id="input" type="text" />
<button id="button">Click</button>
</body>
</html>
js:
//document.open(h.html)
document.write("yo")
const inputNode = document.getElementById('input');
const buttonNode = document.getElementById('button');
buttonNode.addEventListener('click', () => {
const inputValue = inputNode.value;
document.write("hi")
});
so neither "yo" nor "hi" is being shown on the screen; what am i doing wrong?
You have to uncomment the <script> tag so that the script is linked properly, you should see "yo" with the input and the button elements.
Then, put the <script> tag after the the button, otherwise, the script will execute before the button is created, and therefore the event listener will not be added. Now, when you click the button you should see "hi".
<html>
<header>
<title>This is title</title>
</header>
<body>
<input id="input" type="text" />
<button id="button">Click</button>
<script src="h.js"></script>
</body>
</html>

How can I add one to a variable at the push of a button in javascript?

Im trying to add one to a variable on the push of a button in javascript. Here's what I have:
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
var add = 0;
function add1(){add++}
document.write(add);
</script>
<br/>
<input type="button" value="Add One" onclick="add1()" />
</body>
</html>
Well most likely the variable add is being incremented by 1 when you push the button. However that code isn't really doing what you want.
This is probably more like what you're after:
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
var add = 0;
function add1(){
add++;
document.getElementById('numberField').innerHTML = add;
}
</script>
<span id="numberField"></span>
<input type="button" value="Add One" onclick="add1()" />
</body>
</html>
When you do document.write(add) it's replacing everything in the body with the value of add.
We moved the "writing the value" piece of code into the function that is called when you press the button. This is so we redraw the number after it has been incremented.
By updating the contents of an html tag instead of the entire page, we don't loose the button. The html tag has the id numberField, and can be accessed with document.getElementById('numberField');.

How to get text from a text box in JS

The following code does not work
<!DOCTYPE html>
<html>
<body>
<input type="text" id="searchTxt"/>
<input type="button" id="run"/>
<script>
$(document).ready(function() {
$("#run").click(function(){
var input = document.getElementById("searchTxt");
alert(input);
});
});
</script>
</body>
</html>
How can I get and print the value in the text box ?
You have to include the jQuery JS file inside your <head> tag.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
.value on the element return by the getElementById function

Changing element text isn't working

It always seems to be a problem and I fail to see why, I'm trying to change element p text by using his ID, element p id="para1" is inside PostEditor.html:
The elementID I want to change is para1 in the following html:
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link href="styles/editor.css" rel="stylesheet" type="text/css" media="screen" />
<script src="scripts/mainScript.js"> </script>
</head>
<body>
<!-- Input fields -->
<div class="center">
<form id=caller method="post">
<p id="para1" class="text"><Strong>Post your message</Strong></p>
<textarea id="textEditor" rows="16" cols="34" name="content"></textarea>
<input type="submit" onclick="urlLoader('caller','posthandler.php')" value="Post">
</form>
</div>
<!-- end Input fields -->
</body>
</html>
The following function is issued by a click on a link inside index.html and displaying the page you are seeing above and is then supposed to change its content:
From index.html I issue the function from link:
<a onclick="postEditing()"> Edit</a>
This line issue the following function:
function postEditing()
{
var result = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
result.document.getElementById("para1").innerHTML = "11111111111";
result.document.getElementById("para1").innerText = "11111111111";
result.document.getElementById("para1").value = "11111111111";
}
As you can see I tried three methods. I'd never understand what is the difference between them, but I tried all three and none worked!
It's because you're searching the document of the window which shows the index.html, not the document of the newly opened window. try following:
...
var editorWindow = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
editorWindow.document.getElementById("para1").innerHTML = "11111111111";
...
EDIT:
NOW i see the problem: in the function you're trying to access a property of the parameter element, but you don't pass a value for it. So this will end in an error because the accessed object is undefinded!
So you have three options to get it working:
test the parameter (always a good idea): var ID = null; if(element) ID = element.id;
pass a value: <a onclick="postEditing(this)"> Edit</a>
remove the line var ID = element.id;
SOLUTION: (TESTED)
I could not really say why, but the index.html found the para1 and can successfully set the new text. But somehow the new window will reinitialize the old value again.
So you have to do the changing in an handler you run at onLoad:
index.html:
<html>
<head>
<script>
function postEditing() {
var result = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
result.onload = function() {
result.document.getElementById("para1").innerHTML = "11111111111";
}
}
</script>
</head>
<body>
<a onclick="postEditing()"> Edit</a>
</body>
</html>
PostEditor.html:
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link href="styles/editor.css" rel="stylesheet" type="text/css" media="screen" />
<script src="scripts/mainScript.js"> </script>
</head>
<body>
<!-- Input fields -->
<div class="center">
<form id=caller method="post">
<p id="para1" class="text"><Strong>Post your message</Strong></p>
<textarea id="textEditor" rows="16" cols="34" name="content"></textarea>
<input type="submit" onclick="urlLoader('caller','posthandler.php')" value="Post">
</form>
</div>
<!-- end Input fields -->
</body>
</html>
I'm fairly sure you will need to query the return result of calling window.open like this:
function postEditing(element)
{
var ID = element.id;
var result = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
result.getElementById("para1").innerHTML = "11111111111";
result.getElementById("para1").innerText = "11111111111";
result.getElementById("para1").value = "11111111111";
}
[Untested though]
Your button type is submit, which is posting the form. The object is changing in the DOM, only after the script runs, the DOM is reloaded back to it's original state. Try changing your button type to "button", and you should see the P element change appropriately.
Edit: Here's the HTML I used to determine the above. Keeping the button as "submit" caused me to see the text change and then swap back. The HTML below should keep the text in place. HTH!
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<script>
function postEditing(element)
{
document.getElementById('para1').innerHTML = "asdafs";
}
</script>
</head>
<body>
<!-- Input fields -->
<div class="center">
<form id=caller method="post">
<p id="para1" class="text"><Strong>Post your message</Strong></p>
<textarea id="textEditor" rows="16" cols="34" name="content"></textarea>
<input type="button" onclick="postEditing('caller')" value="Post">
</form>
</div>
<!-- end Input fields -->
</body>
</html>

how to show text area on button click?

</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#popup").click(function(){
// pop up a text area and I want to store value of textarea in a variable.
});
});
</script>
</head>
<body>
<form>
<textarea rows="2" cols="20" id="area" style="display:none"></textarea>
<input type="submit" id="popup" value="OK">
</body>
</html>
How to POPUP a text area on a button click?
var textarea = $('#area');
$("#popup").click(function(){
// To show it
textarea.show();
});
// To get the value
var value = textarea.val();
In jquery you can use $("#area").show() to display the element.
If you're using jQuery, use the show method:
$('#area').show();
You can also control the speed of the animation:
$('#area').show("slow");
$('#area').show("fast");
Or you can specify an exact time in milliseconds. Here's the official documentation:
jQuery Show

Categories