The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Help creating a local webpage to copy and paste text
Allen Robberson
post Mar 23 2022, 12:08 PM
Post #1





Group: Members
Posts: 8
Joined: 23-March 22
Member No.: 28,294



Can someone help get this webpage working. It is only going to be a local file

CODE
<big><body><b>Text Neurio Equipment Text for scheduling</b></body></big>
<br><br/>
<big><body><b>EQUIPMENT INSIDE HOME</b></body></big>
<br><br/>
<body>Text Neurio Equipment Inside</body>

<!-- The text field -->
<input type="text" value="I hope this finds you well, this is Tesla Scheduling Department. We have scheduled service work for your solar system on March 30th between 8am to 12pm to 5pm.  Due to the equipment being located on the interior of your home, we do require that someone over the age of 18 is at the property for the entirety of the visit.  If this time does not work, please call 650-288-0974 or by replying the word "Reschedule" if you need to reschedule. Thanks for choosing Tesla and have a wonderful day." id="myInput">

<!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>
<br><br/>
<body>Text Neurio Work Order Equipment Inside</body>

<!-- The text field -->
<input type="text" value="TBC
***** Install Neurio meter ******

CUSTOMER NOTIFIED VIA SMS

Contact Type: SMS

RMA: N/A

Contact/Relation: SMS

Customer Temp: N/A

Equipment Location : Inside

Pets?: ADVISED TO PUT AWAY IN SMS

Gates?: ADVISED TO UNLOCK IN SMS

Flex: N/A

Notes: Customer may or may not be home. Please try and make contact with customer via door and phone to let them know you made the visit." id="myInput">

<!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>

<br><br/>
<body>Text Neurio Customer Confirmed by Phone call Equipment Inside</body>

<!-- The text field -->
<input type="text" value="***** Install Neurio meter ******

CUSTOMER Confirmed by call

Contact Type: Phone call

RMA: N/A

Contact/Relation: SMS

Customer Temp: N/A

Equipment Location : Inside

Pets?: ADVISED TO PUT AWAY IN phone call

Gates?: ADVISED TO UNLOCK IN Phone Call

Flex: N/A

Notes: Customer may or may not be home. Please try and make contact with customer via door and phone to let them know you made the visit." id="myInput">

<!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>
<br><br/>
<big><body><b>EQUIPMENT OUSIDE HOME</b></body></big>

<br><br/>
<body>Text Neurio Equipment Outside</body>

<!-- The text field -->
<input type="text" value="I hope this finds you well, this is Tesla Scheduling Department. We have scheduled service work for your solar system on March 30th between 8am to 12pm to 5pm.  If equipment is outside nobody is required to be home. If your Inverter is located behind a locked gate please make sure it is unlocked to give our technician access and if you have pets please make sure they are secured. If this time does not work, please call 650-288-0974 or by replying the word "Reschedule" if you need to reschedule. Thanks for choosing Tesla and have a wonderful day." id="myInput">

<!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>
<br><br/>
<body>Text Neurio Neurio Work Order Equipment Outside</body>

<!-- The text field -->
<input type="text" value="TBC
***** Install Neurio meter ******

CUSTOMER NOTIFIED VIA SMS

Contact Type: SMS

RMA: N/A

Contact/Relation: SMS

Customer Temp: N/A

Equipment Location : Outside

Pets?: ADVISED TO PUT AWAY IN SMS

Gates?: ADVISED TO UNLOCK IN SMS

Flex: N/A

Notes: Customer may or may not be home. Please try and make contact with customer via door and phone to let them know you made the visit." id="myInput">

<!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>

<br><br/>
<body>Text Neurio Customer Confirmed by Phone call Equipment Outside</body>

<!-- The text field -->
<input type="text" value="***** Install Neurio meter ******

CUSTOMER Confirmed by call

Contact Type: Phone call

RMA: N/A

Contact/Relation: SMS

Customer Temp: N/A

Equipment Location : Outside

Pets?: ADVISED TO PUT AWAY IN phone call

Gates?: ADVISED TO UNLOCK IN Phone Call

Flex: N/A

Notes: Customer may or may not be home. Please try and make contact with customer via door and phone to let them know you made the visit." id="myInput">

<!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 23 2022, 02:56 PM
Post #2


.
********

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



You can only use one BODY element. Here's a basic example:

CODE
<!doctype html>
<html lang="en">
<head>
<title>Page title goes here</title>
<style type="text/css" media="screen">
/* CSS goes here (optional) */
</style>
</head>
<body>
Body content goes here
</body>
</html>

Didn't check what the INPUT elements are used for, but for longer pieces of multiline text TEXTAREA would be a better form element.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Allen Robberson
post Mar 23 2022, 04:16 PM
Post #3





Group: Members
Posts: 8
Joined: 23-March 22
Member No.: 28,294



Is it possible you could help me get this created?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 23 2022, 05:23 PM
Post #4


.
********

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



We can help with your questions...

What do you want to do with the page, create an HTML structure? If it's only for your own use I guess you could use whatever works for you. Do you want paragraphs, bullet lists, tables?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Allen Robberson
post Mar 23 2022, 05:47 PM
Post #5





Group: Members
Posts: 8
Joined: 23-March 22
Member No.: 28,294



I want 8 to 10 predefined text string with a copy button for each. so that i dont have to copy the text from a text file that i am using now
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 23 2022, 08:36 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,733
Joined: 9-August 06
Member No.: 6



And this would be easier?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 24 2022, 06:28 AM
Post #7


.
********

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



QUOTE(Allen Robberson @ Mar 23 2022, 11:47 PM) *

I want 8 to 10 predefined text string with a copy button for each. so that i dont have to copy the text from a text file that i am using now

You could put each text string in almost any HTML element. Javascript can detect clicks and copy the contents of any clickable element.

Simple example:

CODE

<!doctype html>
<html>
<head>
<title>Library</title>
</head>
<body>

<p>Lorem ipsum</p>

<p>Dolor sit amet</p>

<script>
// javascript goes here
</script>

</body>
</html>

If you have no other P elements on the page, the javascript can simply loop through the P elements, and when a click is detected copy the innerText of the clicked P to the browser's clipboard (assuming your browser allows changing the clipboard contents). Perhaps it could also change the color of the last clicked P in order to prevent mistakes.

If you do want other P elements on the page, you could use CLASS attributes or a container element around the groups you want to separate in the script.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 24 2022, 06:30 AM
Post #8


.
********

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



QUOTE(pandy @ Mar 24 2022, 02:36 AM) *

And this would be easier?

I could see the use for it. It might be even faster if the clicked text string populated say an email form field automatically.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Allen Robberson
post Mar 24 2022, 11:19 AM
Post #9





Group: Members
Posts: 8
Joined: 23-March 22
Member No.: 28,294



Yes so much easier
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Allen Robberson
post Mar 24 2022, 01:40 PM
Post #10





Group: Members
Posts: 8
Joined: 23-March 22
Member No.: 28,294



I am sorry i am an older man and this all sounds like gibberish to me

QUOTE(Christian J @ Mar 24 2022, 06:28 AM) *

QUOTE(Allen Robberson @ Mar 23 2022, 11:47 PM) *

I want 8 to 10 predefined text string with a copy button for each. so that i dont have to copy the text from a text file that i am using now

You could put each text string in almost any HTML element. Javascript can detect clicks and copy the contents of any clickable element.

Simple example:

CODE

<!doctype html>
<html>
<head>
<title>Library</title>
</head>
<body>

<p>Lorem ipsum</p>

<p>Dolor sit amet</p>

<script>
// javascript goes here
</script>

</body>
</html>

If you have no other P elements on the page, the javascript can simply loop through the P elements, and when a click is detected copy the innerText of the clicked P to the browser's clipboard (assuming your browser allows changing the clipboard contents). Perhaps it could also change the color of the last clicked P in order to prevent mistakes.

If you do want other P elements on the page, you could use CLASS attributes or a container element around the groups you want to separate in the script.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 24 2022, 01:54 PM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,733
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ Mar 24 2022, 12:30 PM) *

QUOTE(pandy @ Mar 24 2022, 02:36 AM) *

And this would be easier?

I could see the use for it. It might be even faster if the clicked text string populated say an email form field automatically.


Yeah, but the OP said he just wanted to copy the text.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Allen Robberson
post Mar 24 2022, 03:26 PM
Post #12





Group: Members
Posts: 8
Joined: 23-March 22
Member No.: 28,294



QUOTE(pandy @ Mar 24 2022, 01:54 PM) *

QUOTE(Christian J @ Mar 24 2022, 12:30 PM) *

QUOTE(pandy @ Mar 24 2022, 02:36 AM) *

And this would be easier?

I could see the use for it. It might be even faster if the clicked text string populated say an email form field automatically.


Yeah, but the OP said he just wanted to copy the text.



They don't need to be in text boxes just that when i click the button it would copy the text.

https://imgur.com/fManmpp
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 24 2022, 05:57 PM
Post #13


.
********

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



QUOTE(pandy @ Mar 24 2022, 01:54 PM) *

Yeah, but the OP said he just wanted to copy the text.

I'd say it's much more work to first select a block of text (perhaps by double or triple clicking) and press Ctrl+C, compared with just clocking a button once; especially if you have to do it lots of times.

QUOTE(Allen Robberson @ Mar 24 2022, 09:26 PM) *

They don't need to be in text boxes just that when i click the button it would copy the text.

https://imgur.com/fManmpp

That layout could be done like this (without the javascript, of course):

CODE
<h1>Text Neurio Equipment Text For Scheduling</h1>

<h2>EQUIPMENT INSIDE HOME</h2>

<p>Text Neuro work order equipment inside
<input type="text" name="" value="I hope this finds you well...">
<input type="button" name="" value="Copy text">
</p>

<p>Text Neuro equipment inside
<input type="text" name="" value="TBC***">
<input type="button" name="" value="Copy text">
</p>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Allen Robberson
post Mar 24 2022, 06:07 PM
Post #14





Group: Members
Posts: 8
Joined: 23-March 22
Member No.: 28,294



The copy button on that code you sent does not work


QUOTE(Christian J @ Mar 24 2022, 05:57 PM) *

QUOTE(pandy @ Mar 24 2022, 01:54 PM) *

Yeah, but the OP said he just wanted to copy the text.

I'd say it's much more work to first select a block of text (perhaps by double or triple clicking) and press Ctrl+C, compared with just clocking a button once; especially if you have to do it lots of times.

QUOTE(Allen Robberson @ Mar 24 2022, 09:26 PM) *

They don't need to be in text boxes just that when i click the button it would copy the text.

https://imgur.com/fManmpp

That layout could be done like this (without the javascript, of course):

CODE
<h1>Text Neurio Equipment Text For Scheduling</h1>

<h2>EQUIPMENT INSIDE HOME</h2>

<p>Text Neuro work order equipment inside
<input type="text" name="" value="I hope this finds you well...">
<input type="button" name="" value="Copy text">
</p>

<p>Text Neuro equipment inside
<input type="text" name="" value="TBC***">
<input type="button" name="" value="Copy text">
</p>


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 24 2022, 06:42 PM
Post #15


.
********

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



QUOTE(Allen Robberson @ Mar 25 2022, 12:07 AM) *

The copy button on that code you sent does not work

It wasn't meant to, it's just an example of the HTML structure. To make the actual copying work, you need javascript as well. Alas I haven't done something similar for many years so it would likely take me a while.

Edit: it was easier than I remembered:

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>

The above should copy the text to the clipboard (tested in Firefox and Vivaldi), but I wasn't able to make the script paste text from the clipboard to a TEXTAREA in turn. Maybe you need to set special browser permissions for that, see
https://developer.mozilla.org/en-US/docs/We...ontent#security
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Allen Robberson
post Mar 25 2022, 10:02 AM
Post #16





Group: Members
Posts: 8
Joined: 23-March 22
Member No.: 28,294



QUOTE(Christian J @ Mar 24 2022, 06:42 PM) *

QUOTE(Allen Robberson @ Mar 25 2022, 12:07 AM) *

The copy button on that code you sent does not work

It wasn't meant to, it's just an example of the HTML structure. To make the actual copying work, you need javascript as well. Alas I haven't done something similar for many years so it would likely take me a while.

Edit: it was easier than I remembered:

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>

The above should copy the text to the clipboard (tested in Firefox and Vivaldi), but I wasn't able to make the script paste text from the clipboard to a TEXTAREA in turn. Maybe you need to set special browser permissions for that, see
https://developer.mozilla.org/en-US/docs/We...ontent#security



Thanks i got it to work perfectly with this code:

CODE
<h1>Text Neurio Equipment Text For Scheduling</h1>

<h2>EQUIPMENT INSIDE HOME</h2>

<p>Text Neuro work order equipment inside
<input type="text" name="" value="I hope this finds you well...">
<input type="button" name="" value="Copy text">
</p>

<p>Text Neuro equipment inside
<input type="text" name="" value="1234">
<input type="button" name="" value="Copy text">
</p>

<p>Text Neuro equipment inside
<input type="text" name="" value="12">
<input type="button" name="" value="Copy text">
</p>

<p>Text Neuro equipment inside
<input type="text" name="" value="123">
<input type="button" name="" value="Copy text">
</p>

<p>Text Neuro equipment inside
<input type="text" name="" value="54321">
<input type="button" name="" value="Copy text">
</p>
<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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 27th April 2024 - 05:51 AM