I have a contenteditable div whose initial content is set at runtime on the server side. The user then needs to be able to make edits on the client side (thus contenteditable). The user then needs to be able to copy the edited contents of txtDiv with a copy button.
I have tried the code below, but I need for it to work on txtDiv not myInput. Also, it does not work on myInput if I add runat="server" to myInput.
This works as expected:
<script>
function myFunction() {
/* Get the text field */
var copyText = document.getElementById("myInput");
/* Select the text field */
copyText.select();
/* Copy the text inside the text field */
document.execCommand("copy");
/* Alert the copied text */
alert("Copied");
}
</script>
<!-- The text field -->
<input type="text" value="Hello World" id="myInput">
<!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>
I need this to work:
<script>
function myFunction() {
/* Get the text field */
var copyText = document.getElementById("txtDiv").innertext;
/* Select the text field */
copyText.select();
/* Copy the text inside the text field */
document.execCommand("copy");
/* Alert the copied text */
alert("Copied");
}
</script>
<!-- The text field -->
<div id="TxtDiv" runat="server" AutoPostBack="True" aria-multiline="True" contenteditable="true"
style="z-index: 1; text-align:left; border:1px solid; overflow-y:scroll; height: 82px"></div>
<!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>
The user then needs to be able to copy the editted contents of txtDiv with a copy button.
The partial answer at https://forums.asp.net/t/2157977.aspx?How+to+copy+innertext+from+a+contenteditable+div+whose+initial+value+is+set+on+the+server+side+ provided by #Wei got me 90% of the way to the answer. The only thing that I would add is two things: 1) Hyphens are not allowed in control names in the code behind so "my-div" cannot be used if you want to access that control from the code behind. 2)The div needs to be on the client side and you cannot set the innerhtml property from the code behind since the control is not on the server. To get around this I put a span and a server literal into the innerhtml of the div. Now I can set the text of the literal using html constructed in the code behind and it results in the desired output in the div.
The final code that works is:
<script>
function copy() {
var target = document.getElementById('mydiv');
var range, select;
if (document.createRange) {
range = document.createRange();
range.selectNode(target)
select = window.getSelection();
select.removeAllRanges();
select.addRange(range);
document.execCommand('copy');
select.removeAllRanges();
} else {
range = document.body.createTextRange();
range.moveToElementText(target);
range.select();
document.execCommand('copy');
}
}
</script>
<div id="mydiv" contenteditable="true" style="z-index: 1; text-align:left; border:1px solid; overflow-y:scroll; height: 82px"><span><asp:Literal ID="Literal1" runat="server"></asp:Literal></span></div>
<div><input onclick="copy()" type="button" value="Copy" /></div>
And the code behind is:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Literal1.text="<span style='color:#d9534f'> Red </span><span style='color:#0275d8'> Blue </span>"
End Sub
Not only will this allow you to copy the contents of the div but you can have several different colors of text in the div and you can also edit the contents of the div and the edited version will be copied.
Related
I want to be able to show one piece of text Copy Code but have it copy the code #PromoCode01
This is what I have so far;
<p id="code" class="sub">Copy Code</p>
<div class="codecopytext">
<p id="code">#PromoCode01</p>
<style>.codecopytext { display: none;</style>
</div>
<script>
function myFunction() {
var copyText = document.getElementById("code");
copyText.select();
document.execCommand("copy");
alert("Copied the promo code:" + copyText.value);
}
</script>
I know this can be done with URLs and showing different text vs what the URL actually is. I'm just wondering why this won't work?
Thanks in advance.
I have an input with text-overflow: ellipsis. Is it possible to show the beginning of the text on blur()? Right now it stays at the end of the text where the cursor was.
Consider the following GIF trying to demonstrate the issue.
First, I focus the <input> and go the beginning of the input Ctrl + Home. Then I go to the end of the <input> by focusing it again and pressing Ctrl + End and unfocussing. You can see that the ellipsis is only there when my cursor is at the beginning of the input.
I might have just cracked it. Testing different browsers. Edit. Did not work properly in Safari. The setSelectionRange sets the focus back on the input on blur. Ideas?
$("input").on('blur', function(e) {
$(this).get(0).setSelectionRange(0,0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="A bunch of text text text text text text text text text" style="width: 100px; text-overflow: ellipsis;">
Works, but creates a loop in Safari where it sets focus again... Any way to set the selectionrange first and then blur?
$("input").on('blur', function(e) {
$(this).get(0).setSelectionRange(0,0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="A bunch of text text text text text text text text text" style="width: 100px; text-overflow: ellipsis;">
It's fine to blur again when you need to, take a look at the below code and read comments to see what's going on
// set true initially
var setRange = true;
$("input").on('blur', function(e) {
var $this = $(this);
// set range then trigger blur again, change setRange flag
if (setRange) {
$this.get(0).setSelectionRange(0, 0);
setRange = false;
$this.trigger("blur");
} else {
// range was set before, reset the flag so it will work next time
setRange = true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="A bunch of text text text text text text text text text" style="width: 100px; text-overflow: ellipsis;">
If I copy an html table manually, I can paste it into a Google Doc with the formatting preserved (it looks like a table).
How can I copy the contents programmatically, with a button, and paste as an html table? Something like the following...
evar copydeck = $("<div>").html(htmlToInsert);
$('body').append(copydeck);
copydeck.select();
document.execCommand('copy');
copydeck.remove();
The above code does not work...but this does:
copydeck = $("<textarea>").val(this.list.join("\r\n"));
$('body').append(copydeck);
copydeck.select();
document.execCommand('copy');
copydeck.remove();
I guess it is because the element must be selectable - like an input or htmlarea field. But they can't hold html (or it is just plain text, not html).
Any way to copy and paste HTML?
Yes!
function copy() {
var target = document.getElementById('my-div');
var range, select;
if (document.createRange) {
range = document.createRange();
range.selectNode(target)
select = window.getSelection();
select.removeAllRanges();
select.addRange(range);
document.execCommand('copy');
select.removeAllRanges();
} else {
range = document.body.createTextRange();
range.moveToElementText(target);
range.select();
document.execCommand('copy');
}
}
<div id="my-div" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;">
Hello stackoverflow!))
</div>
<div>
<input onclick="copy()" type="button" value="Copy">
</div>
I want to make a popup text box that shows source codes from the textarea in the popup as a web page wile at the same time it will not show the print button codes in the textarea because that text is meant to be as functions for the popup only. As you can see my textarea content has both javascript and html who needs to be hidden from the textarea, but at the same time needs to be inside the text area for the popup to work.
This means I can not put them outside the textarea because then that function will not show in the popup window who will show everything that is in the textarea of the web editor editor unless the popup is made to target a div that holds the textarea and and not the textarea directly. Even so that presents a problem as the textarea will not anymore be converted into a web page when getting the popup.
I am using this textarea for my popup:
<textarea name="textfield" cols="107" rows="31" id="CodeExample" wrap="soft" style="font-size:12px; font-family: Arial, Helvetica, sans-serif; color:#ffffff; background-color:rgba(0,0,0,0.8); resize: none;" placeholder="The is Source Codes here"><script language="Javascript">
function printit(){
if (NS) {
window.print() ;
} else {
var WebBrowser = '<OBJECT id="WebBrowser1" width=0 height=0 CLASSid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
WebBrowser1.ExecWB(6, 2);//Use a 1 vs. a 2 for a prompting dialog box WebBrowser1.outerHTML = "";
}
}
</script>
<script language="Javascript">
var NS = (navigator.appName == "Netscape");
var VERSION = parseInt(navigator.appVersion);
if (VERSION > 3) {
document.write('<form><input type=button value="Print this Page" name="Print" onClick="printit()" style="margin-bottom: 0px; font: bold 11px Arial, Sans-Serif;"></form>');
}
</script></textarea>
<br>
<!-- Run Textarea field in popup BEGIN -->
<script type="text/javascript">
var win = null;
function NewWindow(mypage,myname,w,h,scroll) {
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
win = window.open(mypage,myname,settings);
if (window.focus) {win.focus()}
var t = document.form1.textfield.value;
win.document.write(t);
}
</script>
<input type = "button" value = "Preview" name = "preview" onclick = "NewWindow('','myPop','500','400','yes')">
<!-- Run Textarea field in popup END -->
So now what I want is for the print button codes to not be visible in the textarea, but that they are visible as a print button when the popup button is run. So that the print button adds to the visible source codes added into the box by the web designer.
UPDATE
When I posted this question I found no answer no were on the entire internet.
After fiddling with it for a long time I posted the question here. And by luck I found an answer of how to do it after a few minute of after posted the question. I will not delete the question since I am the FIRST on the internet to find and answer to this question.
Solution:
I solved the problem by simply making a hidden textarea linked to the input popup javascript who is also linked to the visible textera. That way what ever is put inside the visble textarea will come up in the popup and so will also the function from hidden in the hidden textarea come on the same popup when clicked on the "Preview" button.
You can put any HTML, CSS or JavaScript code inside the visible and inside the hidden textarea wile having all the input codes hidden from the visible textarea it but active when the popup is turned on.
<form name = "form1">
<textarea name="textfield" cols="107" rows="31" id="CodeExample" wrap="soft" style="font-size:12px; font-family: Arial, Helvetica, sans-serif; color:#ffffff; background-color:rgba(0,0,0,0.8); resize: none;" placeholder="Put your Source Codes here">
</textarea>
<textarea hidden="on" name="textfield2" cols="1" rows="1" id="CodeExample2">
<script language="Javascript">
function printit(){
if (NS) {
window.print() ;
} else {
var WebBrowser = '<OBJECT id="WebBrowser1" width=0 height=0 CLASSid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
WebBrowser1.ExecWB(6, 2);//Use a 1 vs. a 2 for a prompting dialog box WebBrowser1.outerHTML = "";
}
}
</script>
<script language="Javascript">
var NS = (navigator.appName == "Netscape");
var VERSION = parseInt(navigator.appVersion);
if (VERSION > 3) {
document.write('<form><input type=button value="Print this Page" name="Print" onClick="printit()" style="margin-bottom: 0px; font: bold 11px Arial, Sans-Serif;"></form>');
}
</script>
</textarea>
<br>
<!-- Run Textarea field in popup BEGIN -->
<script type="text/javascript">
var win = null;
function NewWindow(mypage,myname,w,h,scroll) {
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
win = window.open(mypage,myname,settings);
if (window.focus) {win.focus()}
var t1 = document.form1.textfield.value;
var t2 = document.form1.textfield2.value;
win.document.write(t1);
win.document.write(t2);
}
</script>
<input type = "button" value = "Preview" name = "preview" onclick = "NewWindow('','myPop','500','400','yes')">
<!-- Run Textarea field in popup END -->
</form>
NOTE:
If you are making a web editor online as I am with preview function then it all of a sudden it is making sense. Because you will want to preview your codes that you text inside the textarea box and when previewing you will also want that the textarea box shows some extra buttons such as print the preview you made. Perfect to test a design or a page and such and then print it out by the click of one button on the popup generated by the textarea box. Look at the solution I found and test it yourself and see what I mean and why. It will work with any HTML, CSS and JS source codes.
Test it yourself if you do not understand why it was needed and how it works.
Well, as I was searching on the internet for some basic codes to examine - I found this one. A simple code which is supposed to copy the selected text. As i am a complete newbie in JS, I check the meaning of the methods that I didn't understand - and rewrited the code, as i make a few adjustments.
And still the code is not working and If someone can explain - this part ""copyit(this.form.select1)"" - Even though I kind of understand "this" - i am not able to understand what is doind here
function copyit(theField) {
var selectedText = document.getSelection();
if (selectedText.type == 'Text') {
var newRange = selectedText.createRange();
theField.focus();
theField.value = newRange.text;
} else {
alert('select a text in the page and then press this button');
}
}
</script>
<form name="it">
<div align="center">
<input onclick="copyit(this.form.select1)" type="button" value="Press to copy the highlighted text" name="btnCopy">
<p>
<textarea name="select1" rows="4" cols="45"></textarea>
</div>
</form>
This is the original code - and it is not working either
<SCRIPT LANGUAGE="JavaScript">
function copyit(theField) {
var selectedText = document.selection;
if (selectedText.type == 'Text') {
var newRange = selectedText.createRange();
theField.focus();
theField.value = newRange.text;
} else {
alert('select a text in the page and then press this button');
}
}
</script>
And in the body of your web page, add the following where you want the text to appear:
<form name="it">
<div align="center">
<input onclick="copyit(this.form.select1)" type="button" value="Press to copy the highlighted text" name="btnCopy">
<p>
<textarea name="select1" rows="4" cols="45"></textarea>
</div>
</form>
onclick="copyit(this.form.select1)"
executes the copyit() function and passes a variable which is later named theField. The variable that is passed is this.form.select1 which is a textarea with ID select1 which is located in the same form as the input you're clicking hence the this.form.
As to why your code isn't working - you should include here the original code before your adjustments. You probably deleted/changed something you shouldn't have.
I'm not sure what you're asking. Are you asking to, when someone clicks on any button/div, it copies a text you want for his clipboard? If no, ignore my comment, if yes, i'll explain:
First place, where should an user click?
<a class="btn" CopydivFunction(#text)">CLICK ME TO Hello.</a>
Now, add the function with JS.
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
Now, place the text you want somebody to copy (hide it):
<h1 id="text" class="hidden">some text. This part won't be seen because of the hidden class, and this is the text that will be copied to your clipboard.</h1>
Place display:none on css:
#text{
display:none;
}
I think you have to add that, so nobody sees it.
And that should be it, click the <a> and you get the text in the h1#text