The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Paste to clipboard, Need a script that allow me to select from 30 different text based mes
Tim606
post Mar 29 2022, 12:23 PM
Post #1





Group: Members
Posts: 5
Joined: 29-March 22
Member No.: 28,305



This is my first post, sorry if I have put it in the wrong place.

I have a very simply web page that holds ticket reply messages. If you work on a help desk you will know the sort of thing I mean, its the type of thing you add to the end of the ticket to close it. At the moment I simply highlight the message Copy and then paste into the ticket. What I would like is a button below each text message that say copy, I can then click the button, text is copied to the clipboard ready to post into a ticket.

Now I have found several scripts that allows you to copy one text on a page but I have not found a script that can handle having 15 different messages on a page (I have two pages) that allows me to click what ever message I want.

As I mentioned, the it is only two pages, not hosted on a web server simply accessed by a browser direct from the file location. The text messages vary in size, from 2 lines to 5 (short) paragraphs. It is hoped to expand the quantity of message available to use in the future. There are is nothing fancy about the website, it simply a quick efficient way to handle the messages. Unfortunately I know nothing of Javascript so it would be next to impossible to write my own script (I barely manage HTML)

Can anybody suggest anything that would help solve my problem
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 29 2022, 01:39 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,069
Joined: 10-August 06
Member No.: 7



Would this work: https://forums.htmlhelp.com/index.php?s=&am...st&p=143388 (latest post as of today)?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Tim606
post Mar 29 2022, 02:13 PM
Post #3





Group: Members
Posts: 5
Joined: 29-March 22
Member No.: 28,305



QUOTE(Christian J @ Mar 29 2022, 07:39 PM) *

Would this work: https://forums.htmlhelp.com/index.php?s=&am...st&p=143388 (latest post as of today)?


Thats looks very interesting, I shall have a play over the next couple of days and see if it suceeds for me, thanks for pointing it out
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Tim606
post Apr 18 2022, 01:09 PM
Post #4





Group: Members
Posts: 5
Joined: 29-March 22
Member No.: 28,305



QUOTE(Tim606 @ Mar 29 2022, 08:13 PM) *

QUOTE(Christian J @ Mar 29 2022, 07:39 PM) *

Would this work: https://forums.htmlhelp.com/index.php?s=&am...st&p=143388 (latest post as of today)?


Thats looks very interesting, I shall have a play over the next couple of days and see if it suceeds for me, thanks for pointing it out


My apologise, my couple of days turned in to 3 weeks, I have now managed to have a play and while I have got it to work for a simple single sentences phrases I now need to do it where I have 4 or 5 short paragraphs, these are not long paragraphs, couple of sentences max Will the input lines, read across multiple <p></p>??

Below is a sample of the test (I have not included the couple of section I have added to two rows of inputs to the code I have been testing)

Thanks in advance

CODE
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function()
{
    var input=document.getElementsByTagName('input');
    for(var i=0; i<input.length; i++)
    {
        if(input[i].type=='button')
        {
            input[i].onclick=function()
            {
                var text_field=this.previousElementSibling; // assumes each text field is before its button
                text_field.select();
                document.execCommand('copy');
            }
        }
    }
}, false);
</script>    
    
        <div id="logo">
        <h1 id="top"><a href="#">Ticket Notes </a></h1>
    
    </div>
    <hr />
</div>
<!-- end #header -->
<!-- end #header-wrapper -->
<!-- end #logo -->
<div id="page">
    <div id="page-bgtop">
        <div id="page-bgbtm">
            <div id="content">
            
                <div class="post" id="amhold">
                    <h2  class="title"><a href="#">am holding </a></h2>
                    <div class="entry">
                        <p>‚ÄúThank you for raising an Access Management request ticket, unfortunately there is not enough information provided for us to be able to fulfil your request ticket at this time so we need to urgently obtain this detail from you to avoid any delays e.g providing an example user for us to copy the access from. </p>
                        <p>Please review the information that you have provided, add any details that you spot are missing and send these as soon as you can by replying to this email. Ensure that your request ticket approver is copied in to your response, this will save time as we can just add this as an approved adjustment.</p>
                        <p>If you are stuck as to what additional details are needed then contact Service Desk on 0800 980 0822 Option 1</p>
                        <p>If after a day you have not been able to provide us with details via email or phone then the Service Desk will make contact with you. It is important to the team that we quickly get the right data captured and to action your request.</p>
                        <p><a href="#top">back to top</a></p>
                    </div>
                    
                </div>            
            
                <div class="post" id="delacc">
                    <h2  class="title"><a href="#">delete account </a></h2>
                    <div class="entry">
                        <p></p>
                        <p>The users system account has been revoked, [serviceNow account, phophret account, adm account have all been revoked-delete as required]. If the users used a VDI that access has also has been revoked and the VDI removed from the VDI Pool.</p>
                        <p></p>
                        <p></p>
                        <p></p>
                        <p><a href="#top">back to top</a></p>
                    </div>
                    
                </div>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 18 2022, 03:02 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,069
Joined: 10-August 06
Member No.: 7



I've only been able to copy text from form fields into the clipboard. You can copy multiline phrases from TEXTAREA elements, though.

If you have no control over the source material (that is, if you must copy text from multiple P elements), perhaps you could first let the script combine text from multiple P elements into a single TEXTAREA, and then copy that to the clipboard. I couldn't make INPUT text fields work with linebreak characters, and hidden INPUT fields didn't work at all.

CODE
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function()
{
    var entry=document.getElementsByClassName('entry');
    var field=document.getElementsByClassName('field');
    var button=document.getElementsByClassName('button');

    for(var i=0; i<entry.length; i++)
    {
        var sample='';
        var p=entry[i].getElementsByTagName('p');
        for(var j=0; j<p.length; j++)
        {
            sample+=p[j].innerText+'\n\n'; // Joins the text of each P element, each separated by two newlines.
        }

        field[i].value=sample;
        button[i].onclick=function()
        {
            this.previousElementSibling.select(); // assumes the "field" TEXTAREA is right before "button" INPUT.
            document.execCommand('copy');
        }
    }
}, false);
</script>

<div class="entry">
<p>lorem</p>
<p>ipsum</p>
<p>dolor</p>
</div>
<textarea class="field"></textarea>
<input type="button" class="button" value="Copy">


<div class="entry">
<p>sit amet</p>
</div>
<textarea class="field"></textarea>
<input type="button" class="button" value="Copy">
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
larry78723
post Apr 20 2022, 03:47 PM
Post #6


Member
***

Group: Members
Posts: 39
Joined: 5-March 20
Member No.: 27,220



I hope I'm not misunderstanding what you're trying to accomplish. Why not combine all those paragraphs into one with a </br> between each one? That way you only have to deal with one paragraph.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 20 2022, 04:01 PM
Post #7


.
********

Group: WDG Moderators
Posts: 9,069
Joined: 10-August 06
Member No.: 7



QUOTE(larry78723 @ Apr 20 2022, 10:47 PM) *

I hope I'm not misunderstanding what you're trying to accomplish.

Me or the OP? unsure.gif

QUOTE
Why not combine all those paragraphs into one with a </br> between each one? That way you only have to deal with one paragraph.

I was thinking maybe the OP has to work with existing source material, and doesn't want to rewrite it too much. Also, then those BR elements would have to be replaced with newline characters (if that's what the OP wants).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Tim606
post Apr 21 2022, 03:01 PM
Post #8





Group: Members
Posts: 5
Joined: 29-March 22
Member No.: 28,305



QUOTE(Christian J @ Apr 20 2022, 10:01 PM) *

QUOTE(larry78723 @ Apr 20 2022, 10:47 PM) *

I hope I'm not misunderstanding what you're trying to accomplish.

Me or the OP? unsure.gif

QUOTE
Why not combine all those paragraphs into one with a </br> between each one? That way you only have to deal with one paragraph.

I was thinking maybe the OP has to work with existing source material, and doesn't want to rewrite it too much. Also, then those BR elements would have to be replaced with newline characters (if that's what the OP wants).


Correct, I either remove the <p></p> or <br/> personally I am quite happy to highlight, copy & paste on the page but somebody suggested that we have a copy button to make it easier (yeah right). As it is now I have to write and format the section of text I want, then I have to copy the text and paste it with in the <input type="text" name="" value=".................. line, so every section is having to be written out twice.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 21 2022, 04:33 PM
Post #9


.
********

Group: WDG Moderators
Posts: 9,069
Joined: 10-August 06
Member No.: 7



QUOTE(Tim606 @ Apr 21 2022, 10:01 PM) *

Correct, I either remove the <p></p> or <br/> personally I am quite happy to highlight, copy & paste on the page

You can always use (Windows) keyboard commands like triple-clicking on a text paragraph to highlight it, and then copy it with Ctrl+C. But I guess it becomesrepetitive in the long run.

QUOTE
but somebody suggested that we have a copy button to make it easier (yeah right).

Where would that be, on the web page?

QUOTE
As it is now I have to write and format the section of text I want, then I have to copy the text and paste it with in the <input type="text" name="" value=".................. line, so every section is having to be written out twice.

Now you confuse me a little --from where do you get the text to start with, and to where do you paste it once it's copied? For example, if you're going to create the HTML of the web page, maybe it's simpler to put the text snippets in TEXTAREA elements from the start, while the actual copying to the clipboard can be performed by simply clicking inside the TEXTAREA (no need for an extra button):

CODE
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function()
{
    var entry=document.getElementsByClassName('entry');
    for(var i=0; i<entry.length; i++)
    {
        entry[i].onclick=function()
        {
            this.select();
            document.execCommand('copy');
        }
    }
}, false);
</script>

<textarea class="entry" readonly>lorem ipsum
</textarea>

<br>

<textarea class="entry" readonly>dolor sit amet
</textarea>

(I also added READONLY attributes to the TEXTAREAs, to prevent accidental editing).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Tim606
post Apr 22 2022, 05:58 PM
Post #10





Group: Members
Posts: 5
Joined: 29-March 22
Member No.: 28,305



OK lets recap a second, I work with a lot of tickets at work, these are displayed on screen in set templates. As I work on them and close these tickets, the same closing message can be used over and over again, I have around 20 of these closing messages.

I have made a single page web site (hosted as a single file and opened in google Chrome) and at present there are about 20 of these message on this web page. They vary in length from 2 lines to 5 paragraphs (210 words) in size, which I simply highlight, copy and paste from the web page in to the ticket I am working on, a small edit and then close the ticket. Saves a lot of typing at the end of the day.

Now to make the coding you posted on the 18th April work, I write my text out and code it so it appears correctly formatted with sentences, paragraphs etc. on the web page. I then have to write the same text again (I don't actually write it I just copy and paste and remove the coding and put it in the

CODE
<input type="text" name="" value=" the copied text goes in here ">
.

But as I said I can not enter any formatting here as it is basic txt and when copied and pasted into my tickets it has lost all the formatting and appears as a block of text, no sentences or paragraphs.

I did play with textarea but as I have multiple "Textareas" I could not find a way to make it work.

Hope that is a little clearer

This post has been edited by Tim606: Apr 22 2022, 06:01 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 22 2022, 07:48 PM
Post #11


.
********

Group: WDG Moderators
Posts: 9,069
Joined: 10-August 06
Member No.: 7



QUOTE(Tim606 @ Apr 23 2022, 12:58 AM) *

I just copy and paste and remove the coding and put it in the

CODE
<input type="text" name="" value=" the copied text goes in here ">
.

I assume the ticket program/interface is an HTML form, judging from the above INPUT element?

QUOTE
But as I said I can not enter any formatting here as it is basic txt and when copied and pasted into my tickets it has lost all the formatting and appears as a block of text, no sentences or paragraphs.

Pasting text into an INPUT element will indeed lose the newline formatting, you'd need a TEXTAREA to preserve that. Are you allowed to make changes to the ticket interface, and will its form handling script accept TEXTAREA instead of INPUT textfields?

QUOTE
I did play with textarea but as I have multiple "Textareas" I could not find a way to make it work.

You mean in the ticket interface? Can't help with that without seeing how the ticket form is coded.

If you just want to use multiple TEXTAREA elements for storing the template texts, see if my latest example from April 22 works.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 25th May 2022 - 06:31 PM