e.currentTarget vs documentgetElementById

[Robert Moskowitz]

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

 

[Robert Moskowitz]

Perhaps something like:  e.currentTarget.element

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

 

 

[Ingolme]

The currentTarget is an element. It is the element which fired the event. You can use the currentTarget itself wherever you needed an element.

[Robert Moskowitz]

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.

 

[Ingolme]

You should log currentTarget and see what value it contains. If the event listener is on the textarea then currentTarget should be the textarea. To log it, put console.log(event.currentTarget) in your code and then press F12 to open developer tools and see what it printed.

Not all of your code is here, so I don't know which element has the event listener. If your event listener is not on the textarea, then you will have to use DOM traversal properties (parentNode, childNodes, nextElement, previousElement and several others) to get to the textarea from the element that you are clicking on.

[Robert Moskowitz]

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.

[Robert Moskowitz]

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>

 

[Ingolme]

In order to take full advantage of events you should be adding the event listeners using Javascript. Move your CSS to a stylesheet. Use margins instead of <br> elements for vertical spacing.

 

<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>

<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">More code</textarea>
  <button>Copy text</button>
</div>

<div class="copy-area">
  <textarea readonly="readonly">Different code</textarea>
  <button>Copy text</button>
</div>


<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>

I'm not certain that the range code is working properly, that's another topic, but at least the event listeners are working properly.

[Robert Moskowitz]

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.

 

 

[Robert Moskowitz]

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>

 

[Robert Moskowitz]

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.

 

[justsomeguy]

It might not be possible to support very old browsers, it depends what they allow.  I know that some sites used to use a Flash movie to do copying.  Old IE that supports ActiveX may be able to use an ActiveX control to support copying.  At some point you need to just draw the line though.  My company doesn't even fix bugs on unsupported IE browsers for free any more, if a customer finds a bug that is only in an unsupported version of IE we bill them for the bug fix if they want us to do it.  It was a good day when we could make that decision.  We'll fix any bugs that show up in a current browser version, but when Microsoft stopped supporting IE we did too.

[Robert Moskowitz]

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>

 

[Robert Moskowitz]

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

http://www.htt-consult.com/arm.html

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!