Robert Moskowitz

June 19, 2019

Just an update that I have put this all 'into production'. The howtos can be accessed via:

There were almost 100 boxes to modify, but I like to think it is worth it.

Next I actually have to use these to build some new systems and see if I can get the mailserver working all the way through.

THEN go back and learn some more CSS and further improve my page writing skills.

thanks!

June 19, 2019

The square brackets, fqdn does not work in the textarea.

It would be nice, but I think the key here is that the is a textarea tag and all text is treated, well as text!

Possibly some javascripting could stuff some replacement content into the textarea.

June 19, 2019

My googling this has not only come up empty, but statements that it <b>Cannot</b> be done.

I will work out an alternative approach, but any pointers on this is greatly appreciated!

June 19, 2019

I want to italicize on word in a textarea. Something like:

<style>
  .copy-area {
    margin-bottom: 2em;
  }
  .copy-area textarea {
  	border:1px solid black;
    resize:none;
    font-size:inherit;
    padding-top:1em;
	margin-left:3em;
    width:20em;
    height:2em;
    overflow-y:hidden;
    overflow-x:auto;
	font-family: verdana,tahoma,'Bitstream Vera Sans','DejaVu Sans',arial,helvetica,sans-serif;
  }
</style>

<div class="copy-area">
<textarea id="box44"
	style="width:25em;height:2em;">
http://<i>fqdn</i>/roundcubemail/installer
</textarea>
</div>

The italics tag worked fine in the old way I did things, but not surprisingly it does not work in my proper CSS style.

So how do I change just a part of my text's font to italics?

And, yes, this is the 44th textarea in this one howto and still more to convert.

June 18, 2019

On 11/13/2015 at 11:22 AM, ferren said:

TextWrangler (+ Firefox for display) and a wide screen, for Macs. Geany (") for Ubuntu, but it lacks TextWrangler's convenient multi-file search/replace . Free.

I am using Geany 1.35 on Fedora 28 (I really have to build my new Fedora 30 system).

It does what I need (so far) both for html and xml (for IETF Internet Drafts).

Add a Kensington Expert Optical Track ball with its scrolling wheel to move up and down in a doc easily, and I am set.

June 17, 2019

I have always used overflow-y:auto with a fixed height for whatever textarea or other I wanted a scroll bar.

But then my needs are rather simple.

June 17, 2019

I came to the "don't bother about old browser support" late last night. Particularly when I stumbled across here that addEventListener is not supported prior to IE8.

Anyway with all the help I have received here, below is what I have come up with and next to actually convert my howtos over to it.

Thanks! I suspect I will be back with other calls for help!

<head>
	<title>untitled</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 1.34.1" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .copy-area {
    margin-bottom: 2em;
  }
  .copy-area textarea {
  	border:1px solid black;
    resize:none;
    font-size:inherit;
    padding-top:1em;
	margin-left:3em;
    width:20em;
    height:2em;
    overflow-y:hidden;
    overflow-x:auto;
	font-family: verdana,tahoma,'Bitstream Vera Sans','DejaVu Sans',arial,helvetica,sans-serif;
  }
</style>
</head>
<body>
<button style="margin-left:4em" onclick="clickselecttrue()">
Select text<br>
(default)
</button>
<button style="margin-left:4em" onclick="clickselectfalse()">Copy text</button>
<br><br>
<div class="copy-area">
  <textarea>
sudo screen /dev/ttyUSB0 115200
</textarea>
</div>

<div class="copy-area">
  <textarea
  style="height:7em;">
cat &lt;&lt;EOF&gt;&gt;/etc/aliases || exit 1
root:	$admin_email
EOF
newaliases
bind 'set disable-completion off'
</textarea>
</div>

<script>
var textareas = document.querySelectorAll(".copy-area textarea");
var clickselect = true;

var i;
for(i = 0; i < textareas.length; i++) {
  textareas[i].addEventListener("click", copyClipboard);
  textareas[i].readOnly = true;
}

function clickselecttrue() {clickselect = true}
function clickselectfalse() {clickselect = false}

function copyClipboard(e) {
if (clickselect) {
  e.currentTarget.select();
}
else {
  var elm = e.currentTarget;
	if(document.execCommand && document.queryCommandSupported && document.queryCommandSupported('copy')) {
	elm.select();
	document.execCommand("copy");
	}
	else {
	alert('Copy not supported');
	}
}
}
</script>
	
</body>

June 17, 2019

The following function works on the textarea and the button:

function copyClipboard(e) {
  var elm = e.currentTarget;
  if(elm.nodeName.toLowerCase() == "button") {
    elm = elm.previousElementSibling;
  }
if(document.execCommand && document.queryCommandSupported && document.queryCommandSupported('copy')) {
  elm.select();
  document.execCommand("copy");
}
else {
  alert('Copy not supported');
}
}

I suppose I can be pragmatic in that my howtos are about CentOS on ARMv7 SOC, so I would not expect a reader to be using an old IE browser...

but it would be nice to have a copy that works for old IE for other use cases.

June 16, 2019

In the following code, click on the button and the sudo command is copied into the clipboard. Click on the textarea and the clipboard is unchanged from whatever it previously had. So the question remains on how to get the event working on the textarea.

<head>
	<title>untitled</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 1.34.1" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .copy-area {
    margin-bottom: 2em;
  }
  .copy-area textarea {
  	border:1px solid black;
    resize:none;
    font-size:inherit;
    padding-top:1em;
	margin-left:3em;
    width:20em;
    height:2em;
    overflow-y:hidden;
    overflow-x:auto;
	font-family: verdana,tahoma,'Bitstream Vera Sans','DejaVu Sans',arial,helvetica,sans-serif;
  }
  .copy-area button {
    margin-left: 4em;
  }
</style>
</head>
<body>
<div class="copy-area">
  <textarea readonly="readonly">
sudo screen /dev/ttyUSB0 115200
</textarea>
<button>Copy text</button>
</div>

<div class="copy-area">
  <textarea readonly="readonly"
  style="height:7em;">
cat &lt;&lt;EOF&gt;&gt;/etc/aliases || exit 1
root:	$admin_email
EOF
newaliases
bind 'set disable-completion off'
</textarea>
</div>

<div class="copy-area">
  <textarea readonly="readonly">
More code
</textarea>
</div>

<br><br>

<script>
var textareas = document.querySelectorAll(".copy-area textarea");
var buttons = document.querySelectorAll(".copy-area button");
var i;
for(i = 0; i < textareas.length; i++) {
  textareas[i].addEventListener("click", copyClipboard);
}
for(i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", copyClipboard);
}

function copyClipboard(e) {
  var elm = e.currentTarget;
  if(elm.nodeName.toLowerCase() == "button") {
    elm = elm.previousElementSibling;
  }
  
  // for Internet Explorer
  if(document.body.createTextRange) {
    var range = document.body.createTextRange();
    range.moveToElementText(elm);
    range.select();
    document.execCommand("Copy");
   alert("IE Copied content to clipboard");
  }
  else if(window.getSelection) {
    // other browsers

    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(elm);
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand("Copy");
    alert("Copied content to clipboard");
  }
}
</script>
	
</body>

June 16, 2019

ARGH. I just did something wrong in my browser and lost all I typed...

Anyway to try again. I have learned the lesson from you to put all my style settings into the head instead of inline. My test coding is using inline to better see what I am doing and for posting here.

My goal is for the event to trigger on clicking on the textarea, not a button. And to have a choice (set in the beginning of the howto) to by default just select the text, or if you are 'brave' to automate the copy to clipboard. I am a secure communications designer (think IPsec and HIP). It is my secure OS colleagues that cringed on just allowing the javascript to copy to the clipboard, so my goal is no button and choose what action.

Now I see you put all the textareas into their own divisions, and put all these divisions into the same class. Is that for the style sheet control?

I am looking at your javascript. Is what you are doing putting a listening event on both the textarea and the follow-on button? So to achieve my end goal I can drop all the button part.

Looking at if condition in the beginning of the copyClipboard function, am I reading this right that if the button was the click event, then the elm is shifted to the prior (textarea) item?

Perhaps I am learning something here. I will cobble trial code together.

June 16, 2019

The saga is getting more twisted. Look at the code below that puts a onclick on both the textarea and a button. Same function, different results. The button onclick returns the content of the textarea to the clipboard. The textarea onclick does not.

Further if I substitute elm = event.currentTarget and try the click on textarea, nothing to the clipboard...

<textarea id="box22" readonly="readonly" onclick="copyClipboard('box22')"
	style="border:1px solid black;resize:none;font-size:inherit;padding-top:1em;
	margin-left:3em;width:20em;height:2em;overflow-y:hidden;overflow-x:auto;
	font-family: verdana,tahoma,'Bitstream Vera Sans','DejaVu Sans',arial,helvetica,sans-serif;">
sudo screen /dev/ttyUSB0 115200
</textarea>
<button style="margin-left:4em" onclick="copyClipboard('box22')">Copy text</button>
<br><br>


<script>
function copyClipboard(x) {
  //var elm = event.currentTarget;
  var elm = document.getElementById(x);
  alert(x);
  console.log(elm);
  // for Internet Explorer

  if(document.body.createTextRange) {
    var range = document.body.createTextRange();
    range.moveToElementText(elm);
    range.select();
    document.execCommand("Copy");
   alert("IE Copied content to clipboard");
  }
  else if(window.getSelection) {
    // other browsers

    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(elm);
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand("Copy");
    alert("Copied content to clipboard");
  }
}
</script>

June 16, 2019

Ah, so that is how log() works. I was realizing I was going to have to read up on it. Figured it could not have been to someplace in /var/log !

I will do some work on this, hopefully tomorrow. and get back here on what I find out.

June 16, 2019

elm = event.currentTarget // onclick on a textarea

and

elm = document.getElementById(x) // where x is the id of a textarea

do not produce the same results. I would like to replace the later some way with the former.

June 14, 2019

Perhaps something like: e.currentTarget.element

I am looking for a list elements under currentTarget. I have found that there is one: currentTarget.id

June 14, 2019

My ongoing saga...

One function uses e.currentTarget.select() and the other uses document.getElementById(x)

Is there a object under currentTarget that would set a variable with the same content as document.getElementById(x)?

function select(e) {
  e.currentTarget.select();
}
function copyClipboard(x) {
  var elm = document.getElementById(x);
  // for Internet Explorer

  if(document.body.createTextRange) {
    var range = document.body.createTextRange();
    range.moveToElementText(elm);
    range.select();
    document.execCommand("Copy");
//   alert("IE Copied content to clipboard");
  }
  else if(window.getSelection) {
    // other browsers

    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(elm);
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand("Copy");
//    alert("Copied content to clipboard");
  }
}

thanks

June 14, 2019

I had seen claims in various other copy to clipboard that what is in the above link does not work for all browsers. That is why I am doing this alternative copytoclipboard.

I have not figured out what you mean be your last sentence. I have made good strides. The following selects the contents of the textarea, but the alert fails and nothing goes to the clipboard:

<textarea id="box1" 
	style="border:1px solid black;resize:none;font-size:inherit;padding-top:1em;
	margin-left:3em;width:25em;height:7em;overflow-y:hidden;overflow-x:auto;
	font-size:16px;">
cat &lt;&lt;EOF&gt;&gt;/etc/aliases || exit 1
root:	$admin_email
EOF
newaliases
bind 'set disable-completion off'
</textarea>
<br><br>


<script>
var textareas = document.getElementsByTagName("textarea");
for(var i = 0; i < textareas.length; i++) {
  textareas[i].addEventListener("click", select, false);
  textareas[i].readOnly = true;
}
function select(e) {
  // var elm = document.getElementById(x);
   var elm = e.currentTarget;
   alert(elm);
  // for Internet Explorer

  if(document.body.createTextRange) {
    var range = document.body.createTextRange();
    range.moveToElementText(elm);
    range.select();
    document.execCommand("Copy");
//   alert("Copied div content to clipboard");
  }
  else if(window.getSelection) {
    // other browsers

    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(elm);
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand("Copy");
//    alert("Copied div content to clipboard");
  }
}
</script>

I cannot find out what

textareas[i].addEventListener("click", select, false);

is suppose to be doing, other than adding the click event and calling the select function on click? Why the false parameter?

thanks

June 14, 2019

1 hour ago, justsomeguy said:

Is x supposed to be the ID of the textarea that was clicked on that you want to select? Because you don't need to pass that, the element which triggered the event will be part of the event object. Like in the select function, where you use e.currentTarget.

I tried different variants of the following and could not get the copy to clipboard working:

<textarea id="box1" readonly="readonly" onclick="copyClipboard()"
	style="border:1px solid black;resize:none;font-size:inherit;padding-top:1em;
	margin-left:3em;width:25em;height:7em;overflow-y:hidden;overflow-x:auto;
	font-size:16px;">
cat <<EOF>>/etc/aliases || exit 1
root:	$admin_email
EOF
newaliases
bind 'set disable-completion off'
</textarea>
<br><br>


<script>
function copyClipboard(e) {
  // var elm = document.getElementById(x);
   var elm = e.currentTarget.select();
  // for Internet Explorer

  if(document.body.createTextRange) {
    var range = document.body.createTextRange();
    range.moveToElementText(elm);
    range.select();
    document.execCommand("Copy");
//   alert("Copied div content to clipboard");
  }
  else if(window.getSelection) {
    // other browsers

    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(elm);
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand("Copy");
//    alert("Copied div content to clipboard");
  }
}
</script>

June 14, 2019

1 hour ago, justsomeguy said:

You can also just combine those so that whenever you click on a text area it selects all of the text and then copies it.

I have it separate because one of my security colleagues threw a bit of a fit about the security risk of an auto copy to the clipboard. Plus he claims this ability will soon be dropped by the browsers. So I decided to try my hand at giving the reader a clear choice ot either select with a click, then do the copy operation, or an all in one action.

Plus I am trying to learn a few things here! 15mo to retiring at 70 and may want a new job to keep active!

June 14, 2019

1 hour ago, justsomeguy said:

Yeah, but that function isn't going to get an ID passed to it for the clipboard, I don't know where that is supposed to come from. But the event object e does get automatically passed to an event handler and you can pass that through to another function. Is x supposed to be the ID of the textarea that was clicked on that you want to select? Because you don't need to pass that, the element which triggered the event will be part of the event object. Like in the select function, where you use e.currentTarget.

Yes, x is the ID of the textarea, and I was getting ready to test using e.currentTarget instead.

Thanks

June 13, 2019

I can see how to deal with the argument for the copyClipboard function, but don't see what that 'e' argument is in the select function.

Let's say I have a button that sets the variable clipboard to true; the default is false. So I would have a function whichOne:

function whichOne (e, x) {
	if clipboard;
		copyClipboard(x);
	else;
		select(e);
}

?

And the first function would be:

var textareas = document.getElementsByTagName("textarea");
for(var i = 0; i < textareas.length; i++) {
  textareas[i].addEventListener("click", whichOne, false);
  textareas[i].readOnly = true;
}

?

thanks

June 13, 2019

I have (with lots of help) two functions to choose between for a click on event on a textarea. I was thinking I could have 2 buttons at the beginning of the page that would set something that would determine which function gets set as the event function. But lots of challenges here.

Should I be setting a global variable with those buttons (which would still be around if another page is loaded into the window?

The functions have different parameters, so I am not sure how to involk them properly. As you will see in the code below, the function select(e) is set up for all textareas click event. I want to be able have all textareas either use that or the copyClipboard function.

I have spent the day going through the javascript tutorial here, and I have not learned enough to do this on my own. All help and pointers greatly appreciated! Here is what I have so far:

<script>
var textareas = document.getElementsByTagName("textarea");
for(var i = 0; i < textareas.length; i++) {
  textareas[i].addEventListener("click", select, false);
  textareas[i].readOnly = true;
}
function select(e) {
  e.currentTarget.select();
}
function copyClipboard(x) {
  var elm = document.getElementById(x);
  // for Internet Explorer

  if(document.body.createTextRange) {
    var range = document.body.createTextRange();
    range.moveToElementText(elm);
    range.select();
    document.execCommand("Copy");
//   alert("Copied div content to clipboard");
  }
  else if(window.getSelection) {
    // other browsers

    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(elm);
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand("Copy");
//    alert("Copied div content to clipboard");
  }
}
</script>

Thank you

June 13, 2019

Thanks, though it is

textareas[i].readOnly = true;

Almost reminds me of my ASN.1 coding days like subjectAltName... Similar naming construction rules?

My next question on this should really be directed to the javascript forum. Should have moved to that a few questions ago I guess.

June 13, 2019

Ah, thanks. That was left out in the original code in the 1st reply. So click is now working.

But readonly is not. My textarea can still be overwritten locally. The

  textareas[i].readonly = true;

is not doing the job.

June 13, 2019

On 6/8/2019 at 7:21 PM, Ingolme said:
You can have some Javascript code loop through all textareas in the document and add an event listener for your onclick event.. You can even set the readonly property.
var textareas = document.getElementsByTagName("textarea");
for(var i = 0; i < textareas.length; i++) {
  textareas[i].addEventListener("click", select, false);
  textareas[i].readonly = true;
}
function select() {
  e.currentTarget.select();
}

I am missing something here. I added the above into my script section, but it is not working.

<textarea id="box1"
	style="width:50em;height:9em;overflow-x:scroll;white-space:pre;">
mkdir hardkernel ; cd hardkernel
 
wget https://raw.githubusercontent.com/hardkernel/u-boot/odroidxu4-v2017.05/sd_fuse/sd_fusing.sh \
https://raw.githubusercontent.com/hardkernel/u-boot/odroidxu4-v2017.05/sd_fuse/bl1.bin.hardkernel \
https://raw.githubusercontent.com/hardkernel/u-boot/odroidxu4-v2017.05/sd_fuse/bl2.bin.hardkernel.720k_uboot \
https://raw.githubusercontent.com/hardkernel/u-boot/odroidxu4-v2017.05/sd_fuse/tzsw.bin.hardkernel
</textarea>

And script block:

<script>
var textareas = document.getElementsByTagName("textarea");
for(var i = 0; i < textareas.length; i++) {
  textareas[i].addEventListener("click", select, false);
  textareas[i].readonly = true;
}
function select() {
  e.currentTarget.select();
}
function copyClipboard(x) {
  var elm = document.getElementById(x);
  // for Internet Explorer

  if(document.body.createTextRange) {
    var range = document.body.createTextRange();
    range.moveToElementText(elm);
    range.select();
    document.execCommand("Copy");
//   alert("Copied div content to clipboard");
  }
  else if(window.getSelection) {
    // other browsers

    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(elm);
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand("Copy");
//    alert("Copied div content to clipboard");
  }
}
</script>

June 13, 2019

Ah,

I see how I missed that. This old dog keeps struggling along learning "new" things.

Now to try adding the javascript...

Thanks

Sign In

Robert Moskowitz

Posts

Joined

Last visited

Content Type

Profiles

Forums

Events

Posts posted by Robert Moskowitz

e.currentTarget vs documentgetElementById

Italics within a textarea

Italics within a textarea

Italics within a textarea

Favourite html editors...

overflow-y not working

e.currentTarget vs documentgetElementById

e.currentTarget vs documentgetElementById

e.currentTarget vs documentgetElementById

e.currentTarget vs documentgetElementById

e.currentTarget vs documentgetElementById

e.currentTarget vs documentgetElementById

e.currentTarget vs documentgetElementById

e.currentTarget vs documentgetElementById

e.currentTarget vs documentgetElementById

Change which funcition gets called on click

Change which funcition gets called on click

Change which funcition gets called on click

Change which funcition gets called on click

Change which funcition gets called on click

Change which funcition gets called on click

setting defaults for textarea

setting defaults for textarea

setting defaults for textarea

setting defaults for textarea

Browse

Activity