Change which funcition gets called on click

[Robert Moskowitz]

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

 

[justsomeguy]

Create a third function which decides which other function to call.  You can pass the event object and any other parameters to the next function also.

[Robert Moskowitz]

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

 

[justsomeguy]

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.

[justsomeguy]

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.

[Robert Moskowitz]

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

[Robert Moskowitz]

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!

 

 

[Robert Moskowitz]

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>

 

Edited June 14, 2019 by Robert Moskowitz

[justsomeguy]

I'm not sure about doing the whole thing with the range, you should just need to select and copy:

https://www.w3schools.com/howto/howto_js_copy_clipboard.asp

I don't know if document.execCommand is case-sensitive or not, but they show "copy" there.  You also might want to do an else to show an alert if none of the other two if statements match, for testing.  Also, you set elm to whatever the return value of the select method is, not the element itself.

[Robert Moskowitz]

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

 

[justsomeguy]

I had seen claims in various other copy to clipboard that what is in the above link does not work for all browsers. 

Right, nothing works for all browsers, which is why you're trying multiple ways.  I would add the example on that page.  You're saying it's not working now, so why not try another way, right?

I would start minimal, right now you have a bunch of stuff that apparently doesn't work.  I would start over with just the code on the page I linked to, and get that working.  Then, try it with other browsers.  If something like IE doesn't support that, then add your code that checks if it's IE and do the other method, and test each time to make sure everything still works.  That's going to be easier than trying to guess why your current code isn't working.  Maybe the browsers you're testing with don't support the method that you're trying to use.

It looks like you removed the selection, so now there's nothing to copy.  You're no longer selecting the text to copy.

With the alert, I meant to suggest telling you if it's not going to do anything instead of just not doing anything:

if(document.body.createTextRange) {
  ...
}
else if(window.getSelection) {
  ...
}
else {
  alert('Copy not supported');
}

I would start with this and go from there:

if(document.execCommand && document.queryCommandSupported && document.queryCommandSupported('copy')) {
  elm.select();
  document.execCommand("copy");
}
else {
  alert('Copy not supported');
}

I think you'll find that will work in most modern browsers, and then if you identify specific other browsers that you want to target then you can add more code for those.