Is there a way to preserve line breaks when programmatically copying text to the clipboard with JavaScript?

Utilizing Javascript alongside a duo of devexpress asp.net controls to dynamically duplicate the contents of an ASPxMemo (multiline textfield) and assign those contents as the body of an email.

The copying and pasting is functioning correctly for the most part, however, I have observed that if my ASPxMemo contains multiple lines, it is merged into one line when pasted in the email body. For instance, if the content in the ASPxMemo looked like this:

aaa
bbb
ccc

I wish to maintain the original formatting but currently, the email's body appears as follows:

aaabbbccc

This action takes place upon clicking an ASPxButton:

<dx:ASPxButton id="btnClipboardCopy" runat="server">
    <Image Url="clipboard.png"></Image>
    <ClientSideEvents Click="function(s, e) { 
            let subject = 'Submission';
            let body = footnote.GetText();
            window.open('mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e767b726e7a7b6d755e666666307d7173">[email protected]</a>?subject=' + subject + '&' + 'body=' + body);
        }"
    />
</dx:ASPxButton>

Any insights or suggestions would be appreciated. Thank you

Answer №1

It seems that your Email compose window is opening in HTML mode, which means you will need to replace newline characters in the body with <br>. To do this, try inserting the following line into your JS click handler after initializing the body variable:

body = body.replace(/(?:\r\n|\r|\n)/g, '<br />');

If this doesn't work right away, you might have to experiment with escaping special characters like < and > as you are creating a link. In that case, you can try this additional fix:

body = body.replace(/(?:\r\n|\r|\n)/g, '%3Cbr%3E');

Hope that helps!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to retrieve the size of a three.js group element?

Obtaining the dimensions of a mesh (Three.Mesh) can be done using the following code: mymesh.geometry.computeBoundingBox() var bbox = mymesh.geometry.boundingBox; var bboxWidth = bbox.max.x - bbox.min.x; var bboxHeight = bbox.max.y - bbox.min.y; var bbo ...

Incorporate a personalized add-button into the material-table interface

My current setup includes a basic material-table structured like this: <MaterialTable options={myOptions} title="MyTitle" columns={state.columns} data={state.data} tableRef={tableRef} // Not functioning properly editabl ...

What is the process for implementing optional chaining on a JSON object?

I'm currently facing an issue where I need to compare a value within a JSON object with a variable. if (resp.userdetails.name == username) { // do something } The challenge arises when not all resp objects contain the userdetails property, resulting ...

Having trouble maintaining the original events on a cloned element

My goal is to duplicate an element passed into a function and retain all associated events, including ones like $('.example').on('click', function(e) ... )} that are defined within the document ready. Here's what I'm trying: ...

What is the best way to deliver an HTML document in Express from a directory that is one level higher than my server folder?

I am facing an issue while trying to access an HTML file from my main directory through my Express server, which is located one level deeper in the server folder. Below is the configuration of my server code: const express = require('express') ...

Angular 6: Issue with displaying data on the user interface

Hello! I am attempting to fetch and display a single data entry by ID from an API. Here is the current setup: API GET Method: app.get('/movies/:id', (req, res) => { const id = req.params.id; request('https://api.themoviedb.org/ ...

What is the best way to detect if a user has reached the end of a container div while implementing Infinite Scroll

I am in the process of implementing infinite scroll on our website's dashboard, but I am currently facing a challenge in determining the bottom of the container div in my jsfiddle mockup. The original function works on a blank page with no container ...

Sending information to a subpage through props using a query in the URL triggers a 431 Request Header Fields Too Large error

I have a page called campaigns, and I am facing an issue on the index page where I want to pass data to my dynamic page [campaignId].tsx. Although I can see the data on my dynamic page, the URL links are becoming too long, leading to an HTTP Status code 4 ...

Differentiating a path element in SVG by dynamically adding color using d3 and react

I have a unique SVG icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <circle cx="12" cy="12" r="12" /> <path class="svg-fill" d="M12,2A10,10,0,1,0,22, ...

Server-side Data Fetching with Nuxt.js

Is there a method to exclusively retrieve data from an API on the server-side in NuxtJS due to me needing to include my API_TOKEN in the request headers? Sample Code: <template> <div> <h1>Data obtained using asyncData</h1> ...

The validation feature is ineffective when used with Material UI's text input component

I need a function that can validate input to make sure it is a number between 1 and 24. It should allow empty values, but not characters or special symbols. function handleNumberInput(e) { const re = /^[0-9\b]+$/; const isNumber = re.test(e.target.val ...

Troubleshooting undefined results with AngularJS ng-repeat filter

My objective is to create a Letter Filter, where users can click on buttons from A to Z to filter the displayed data. When clicking on the letter 'A' button, only data starting with 'A' should be shown. However, I have encountered an i ...

The optimal method for loading CSS and Javascript from an ajax response within a JavaScript function - Ensuring cross-browser compatibility

I am in a situation where I need jQuery to make sense of an ajax response, but due to latency reasons, I cannot load jQuery on page load. My goal is to be able to dynamically load javascipt and css whenever this ajax call is made. After reading numerous a ...

How come my date computed property does not update reactively when changes occur?

I have a Date object in my data, and I need to convert the date into a string for a date picker component in Vuetify. The initial date is being read and displayed correctly. I am able to set the date as well - when I set a code breakpoint, I can see the ...

Tips for utilizing Vue 'component' with just Vue added as a page add-on using <script>:

I am trying to incorporate a Vue component called vue-timeago: import VueTimeago from 'vue-timeago' Vue.use(VueTimeago, { name: 'Timeago', // Component name, `Timeago` by default locale: undefined, // Default locale locales: { ...

Search for specific parameters in an array and retrieve them

I have been attempting to sift through an array of data retrieved from my API, but unfortunately, the data remains unfiltered. I suspect that it might be due to the way I implemented my method or perhaps my params are not being returned correctly. Below ar ...

How come TypeScript remains silent when it comes to interface violations caused by Object.create?

type Foo = { x: number; }; function g(): Foo { return {}; // Fails type-check // Property 'x' is missing in type '{}' but required in type 'Foo'. } function f(): Foo { return Object.create({}); // Passes! } functio ...

Tips for adding a string variable to a JQuery HTML element attribute

Hi there, I've been working on a JQuery code to append data to a div element and it's been successful so far. Here is the code: $('#conversation').append('<div id="receiver"><p><b>' + username + ':< ...

Bizarre issue encountered while attempting to upgrade a program to Vue2

Upon running vue-migration-helper and updating everything, I encountered the error below. vue2.default.user is not a function Console error: Uncaught TypeError: _vue2.default.use is not a function at eval (eval at <anonymous> (app.js:1624), & ...

Compatibility issues between jQuery and AngularJS are causing problems

Currently, I am facing a compatibility issue between RequireJS and Angular in my setup. Everything functions without any problems when using jQuery version 1.7.2. However, I wanted to upgrade to jQuery 1.8.1 along with jQuery UI, but unfortunately, my Angu ...